@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow);
@import url(https://fonts.googleapis.com/css?family=Loved+by+the+King);

body {
  padding:0;margin:0;
	background:rgba(0,0,0,.06) url('http://www.lacor.info/film/academie_des_muses/img/bg/1');
 background-size:50px;
  font-family:Pt sans narrow, sans-serif;
	font-size:16px;
	color:rgb(0,0,0);
  line-height:1.4rem;
  text-align:justify;
}

.back a{
 display:block;
  height:2rem;
  z-index:6;
  position:fixed;
  font-family: 'Loved by the King', cursive;
  font-size:3rem;
  color:	hsla(0, 52%, 75%,.6);
  top:2rem;
  right:1rem;
  text-decoration:none;
  text-shadow:3px 1px 1px hsla(0, 52%, 5%,.1);
  mix-blend-mode:difference;
}

h1 {
  position:relative;
  padding:0;margin: 0;
  display:block;
  font-size:2.8em;
 font-family: 'Loved by the King', cursive;
  color:rgba(255,255,255,.7);
  line-height:2em;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  text-shadow:.05em .05em 0 rgba(0,0,0,.1),
              .07em .07em 0 rgba(255,255,255,.35),
              .1em .1em 0 rgba(0,0,0,.15);
}

.subtitle{
 font-size:3em;
 font-weight:700;
 color:rgba(0,0,0,.7);
 line-height:1em;
 text-align:center;
 font-family: 'Loved by the King', cursive;
}
.author{
 font-size:1.2em;
 line-height:2em;
 letter-spacing:.1em;
  color: 	hsla(0, 52%, 0%,.9);
 line-height:1em;
 letter-spacing:0;
 text-align:center;
 border-bottom:.19em solid hsla(0, 52%, 75%,.3);
 padding:1.2em;margin:0 0 1em 0;
}

.container {
  position:relative;
	width:80%;
	padding:0 10% 1em 10%;margin:auto;
  overflow:hidden;
  display:block;
}
.container:before {
  content:'';
  position:absolute;
  top:26em;left:0;right:0;bottom:0;
  padding:0;margin:auto;
  width:.1em;height:100%;
  background:hsla(0, 52%, 75%,.4);
  display:block;
}
.right-content, .left-content {
  position:relative;
	width:48%;
	padding:0;margin:0;
  display:block;
  opacity:1;
}

.left-content {
  float:left;
}
.right-content {
  float:right;
}



.container div img {
  position:relative;
  width:100%;height:auto;
  display:block;
 	padding:0em;margin:0
}

.legend {
 background:transparent;
  position:relative;
  width:100%;height:auto;
  display:block;
 	padding:0em;margin:0;
   color: 	hsla(0, 52%, 75%,.9);
 text-align:center;
 font-size:.9em;
 line-height:1em;
 padding-bottom:3em;
 margin-top:-1em;
}
.legend a{
  text-decoration:none;
  color: 	hsla(0, 52%, 75%,1);
}

#sign{
 display:block;
 padding-top:1em;
 font-size:.9em;
 color:rgba(0,0,0,.3);
 text-align:right;
}

#sign a{
 text-decoration:none;
}

#footer{
 font-size:.8em;
 color: 	hsla(0, 52%, 75%,.8);
 text-align:center;
 display:block;
}
#footer a{
text-decoration:none;
color: 	hsla(0, 52%, 75%,1);
}


.right-content div {
  position:relative;
	 padding:0;margin:0 0 2em 0;
  display:block;
 border:.1em solid rgba(0,0,0,.1);
  font-size:1.2em;
  line-height:1.7em;
}

.left-content div {
  position:relative;
	 padding:0;margin:0 0 2em 0;
  display:block;
 border:.1em solid rgba(0,0,0,.1);
  font-size:1.2em;
  line-height:1.7em;
}


.left-content p {
  position:relative;
	padding:1.5em;margin:0 0 2em 0;
  border:.1em solid rgba(0,0,0,.1);
  background:rgba(255,255,255,.3);
  display:block;
 	font-size:1.2em;
 line-height:1.7em;
}
.left-content p:before {
  content:'▶︎';
  position:absolute;
  float:right;
   bottom:27px;right:.3em;
  width:.8em;height:.8em;
  padding:0;margin:0;
  border-radius:100%;
 color: 	hsla(0, 52%, 75%,.6);
 font-size:.9em;
  background:rgba(0,0,0,0);
  display:block;
}

.right-content p {
  position:relative;
	 padding:1.5em;margin:0 0 2em 0;
  border:.1em solid rgba(0,0,0,.1);
  background:rgba(255,255,255,.3);
  display:block;
 font-size:1.2em;
 line-height:1.7em;
}
.right-content p:before {
  content:'◀︎';
  position:absolute;
  float:right;
  left:.2em;bottom:27px;
  width:.9em;height:.8em;
  padding:0;margin:0;
  border-radius:100%;
  background:rgba(0,0,0,0);
  color: 	hsla(0, 52%, 75%,.6);
 font-size:1em;
  display:block;
}

.right-content p:last-child:before{
 content:'';
}

.left-content div.comment{
 position:relative;
	padding:1.5em;margin:0 0 2em 0;
  border:.1em solid rgba(0,0,0,.1);
  background:transparent;
  display:block;
 	font-size:.9em;
 line-height:1.1em;
 color: 	hsla(0, 52%, 75%,.8);
 text-align:left;
}

.left-content div.comment a{
 text-decoration:none;
 color:	hsla(0, 52%, 75%,1);
 font-weight:bold;
}


.container p {
  -webkit-transition:.5s ease-in-out 1s;
  -moz-transition:.5s ease-in-out 1s;
  -ms-transition:.5s ease-in-out 1s;
  -o-transition:.5s ease-in-out 1s;
  transition:.5s ease-in-out 1s;
}

.container img {
  -webkit-transition:.5s ease-in-out 1s;
  -moz-transition:.5s ease-in-out 1s;
  -ms-transition:.5s ease-in-out 1s;
  -o-transition:.5s ease-in-out 1s;
  transition:.5s ease-in-out 1s;
}

.left-content .slide {
  position:absolute;
  left:-100%;
  -webkit-transition:.1s ease-in-out;
  -moz-transition:.1s ease-in-out;
  -ms-transition:.1s ease-in-out;
  -o-transition:.1s ease-in-out;
  transition:.1s ease-in-out;
  opacity:0;
}
.right-content .slide {
  position:absolute;
  right:-100%;
  -webkit-transition:.1s ease-in-out;
  -moz-transition:.1s ease-in-out;
  -ms-transition:.1s ease-in-out;
  -o-transition:.1s ease-in-out;
  transition:.1s ease-in-out;
  opacity:0;
}