@font-face { 
	font-family: 'Montserrat-Regular'; 
	src: url('../polices/Montserrat-Regular.otf') format('truetype'); 
}

@font-face { 
	font-family: 'Montserrat-Light'; 
	src: url('../polices/Montserrat-Light.otf') format('truetype'); 
}

html { 
	height: 100%; 
	width: 100%;
}

body { 
	-webkit-user-drag: none;
	font-family: 'Montserrat-Light'; 
	height: 100%; 
	width: 100%;
	min-width:1000px;	
	margin: 0px; 
	padding: 0px; 
	background: #fff;
	background: url(../images/fond.png);
	background-size: 100% 100%;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

section {
	width: 100%;
}

a { 
	outline: none;
}

nav#menu {
	position: fixed;
	width: 100%;
	min-width:1000px;	
	height: 70px;
	background: #364157;
	text-align: center;
	border-bottom: 2px solid #000;
	z-index: 10;
}

nav#menu #liens {
	position: relative;
	display: flex;
	justify-content: space-between;
	width: 860px;
	margin: 0 auto;
	padding: 0 20px;
}

nav#menu a {
	display: inline-block;
	color: #fff;
	text-decoration: none;
	line-height: 70px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

nav#menu a:hover {
	-webkit-transition: text-shadow 0.2s linear;
	text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}

iframe { 
	padding-top: 40px;
    display: block;
    margin: 0 auto;
}

.content {
	width: 60%;
	margin: 0 auto;
	line-height:24px; 
	text-align: justify;
}

#home {
	position: relative; 
	width: 100%;
	height: 100%;
	overflow: hidden;
}
 
#home #logo-esper {
	width: 100%;
	height: 100%;
	transition: transform 8s ease-in-out;
	transition-delay: 3s;
	text-align: center;
	z-index: 0;
	transform: scale(0.92);
}

#home #click-to-replay {
	position:relative;
	text-align:center;
	text-transform: uppercase;
	top:85%;
	font-weight: bold;
	opacity: 0;
	transition: opacity;
}
	
@keyframes blink {
	0% {
        opacity: 0;
    }
	25% {
        opacity: 0.5;
    }
	50% {
		opacity: 1;
	}
	75% {
		opacity: 0.5;
	}
	100% {
		opacity: 0;
	}
}

.blink {
  animation: blink 2s infinite linear;
}

#home #logo-esper img {
	position: relative;
	top: 54%;
    transform: translate(0%, -54%);	
}

#home #logo-esper.scale {
	transform: scale(1);
}

#home #image-esper {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

#home #image-esper #img {
	position: absolute;
	height: 100%;
	left: 50%;
    transform: translate(-50%, 0);
	opacity: 1;	
	transition: opacity 2s ease-in-out;
}

.transition {	
	transition: opacity 3s linear;
}

#home #logo-esper.no-transition {
	transition: all 0s;
	transition-delay: 0s;
}

.img-added {
	left: 50%;
    transform: translate(-50%, 0);
    position: absolute;
}

#characters {
	position: relative; 
	width: 100%;
	height: calc(100% - 70px);
}

#c-characters {
	position:relative;
	top:5%;
	width:100%;
	height:90%;
	margin: 0 auto;
	text-align: center;
}

#c-characters  img {
	max-width:100%;
	max-height:100%;
}

#novel, #about {
	background: #364157;
	width: 100%;
	color: #fff;
	padding-bottom: 40px;
}

#about {
	padding-bottom: 20px;
}

#novel p {
	display: inline-block;
	margin: 20px 0;
}

#novel p:first-child, #about p:first-child {
	margin-top: 40px;
}

#about .content p:first-child {
	padding-top: 40px;
}

#novel div.images {
	display: flex;
	justify-content: space-between;
}

#novel div.images:first-of-type {
	margin-top: 20px;
}

#novel div.images a:not(:last-child) {
	margin-right: 1%;
}

#novel img { 
	border: 1px solid #242424;
	width: 100%;
	cursor: pointer;
}

canvas {
    position: absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}

h3 {    
	font-weight: normal;
    font-family: 'Montserrat-Regular';
	margin-bottom: 0px;
	margin-top: 40px;
}

#about .desc-about {
	margin-bottom: 0px;
}

li {
	list-style-type:none;
}

li.open-in-new a, li.open-in-new a:visited, li.open-in-new a:active {
	color:#ccc;
	text-decoration: none;
}

li.open-in-new a:hover {
	text-decoration: underline;
}

li.open-in-new::after {
	content: ' open_in_new';
	font: normal normal normal 1em/1 'Material Icons';
	color:#ccc;
	vertical-align: text-bottom;
}

#footer {
	width: 100%;
	text-align: center;
	font-size: 0.9em;
	height: 40px;	
}

#footer p {
	line-height: 40px;
	margin: 0; 
}

#video {
	margin-top: 40px;
	text-align: center;
}