@import url(https://fonts.googleapis.com/css?family=Homenaje);
@import url(https://fonts.googleapis.com/css?family=Noto+Serif+JP);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Overpass&display=swap);
/***************************************/
/*             html - body             */    
/***************************************/
html {
    -webkit-font-smoothing: antialiased;
    text-rendering:geometricPrecision;
  }

/* indispensable pour les tailles en rem */
html {font-size: 100%;!important;}
html { font-size: 1vw;!important;}

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

 html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body { 
    background-color: rgb(0, 0, 0);
    
    font-family: Homenaje, sans-serif;
    letter-spacing: .15em;
    color: rgb(255, 255, 255);
    
    /*background-image: url('../visuels/index_reflets.jpg');
    background-image: url('../visuels/index_html.jpg');
    background-image: url('../images/ciel_b.jpg');*/
    background-repeat: no-repeat;
    background-size:cover;
    overflow: hidden; 
}

/**
 * Remove default margin.
 */

 body {
  margin: 0;
  height: 100vh;
    width : 100vw;  
}

* {
    box-sizing: inherit;
    transition-property: all;
    transition-duration: 0.6s;
    transition-timing-function: ease;
  }
    
 

/* ================ #Cursor ================== */
/*
.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;	
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%
}
.cursor{
	background-color: #fff;
	height: 10px;
	width: 10px;
	z-index: 99999;
	box-shadow: 0 0 22px 0 rgba(255,255,255, 0.6);
}
.cursor2,.cursor3{
	height: 36px;
	width: 36px;
	z-index:99998;
	opacity: 0;
	background: rgba(255,255,255,.03);
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(2.2) translateX(-25%) translateY(-25%);
	transform:scale(2.2) translateX(-25%) translateY(-25%);
	border:none;
}
.video-cursor .cursor{
	opacity: 0;
}
.logo-cursor .cursor{
	opacity: 0;
}
.logo-cursor .cursor2,
.logo-cursor .cursor3{
	-webkit-transform:scale(2.2) translateX(-25%) translateY(-25%);
	transform:scale(2.2) translateX(-25%) translateY(-25%);
	border:none; 
	opacity: 1;
}
.section{
	position: relative;
	width: 100%;
	display: block;
	overflow: hidden;
	height: 100vh;
}
.blur-img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 8;
	display: block;
	background-size: cover;
	background-position: center;
	background-image: url("../visuels/ilya.jpg");
    opacity: 0.2;
	filter: blur(5px);
}
.blur-img-over{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  border: 10px solid #060606;
	z-index: 9;
	display: block;
}
*/
.cadre {
	position: relative;
	width: 92%;
	display: block;
    top:7.5vh;
    left:4vw;
}

 .aside {
    grid-area: aside;    
  }
  
  .content {
    grid-area: bloc;
    position: relative;
  }
    
  
.wrapper {
    top:0;
    display: grid;
    grid-template-columns: 10vw 66vw 10vw;
    grid-template-rows: 25vh 25vh 25vh;
    /*grid-gap: 5vh;*/
    grid-column-gap: 3vw;
    grid-row-gap: 5vh;
    grid-template-areas:
      "aside content aside"
      "aside content aside"
      "aside content aside";
  }
  

.guillemet {
    position: relative;
	width: 100%;
    height: 25vh;    
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.1);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
}

.guillemet_G {
    left: 0;
    text-align: center;   
}

.guillemet_D {
    right: 0;
    text-align: center;   
}

.guillemet h1 {
    font-family: 'Overpass', sans-serif;
    font-size: 80px;   
    line-height: 10vh;
}

.bloc {
    position: relative;
	width: 100%;
    height: 25vh;    
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.15);    
    text-align: center;
}

.bloc h1 {
    font-family: 'Overpass', sans-serif;
    font-size: 10em;
    line-height: 1vh;  
    vertical-align:middle;
}

.plein {	
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(0, 0, 0, 0.1);
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}

.vide {	
    background-color: rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    background-color: rgb(0, 0, 0);
    color: rgba(255, 255, 255, 1.0);
}

/* Video
================================================== */
/*
.wrap-rel {
	position: relative;
	width: 100%;
	display: block;
}
.video-container {
	position: absolute;
	top: 50%;
	
    left:15%;
	width: 70%;
	z-index: 10;
	display: block;
	margin: 0;
	padding: 0;
    background-color: black;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
*/
/* #Video wrapper
================================================== */
/*
video {    
    background: transparent;
    border-radius: 10px;
	box-shadow: 0px 0px 0px 15px rgba(0,0,0,0.45);
}

.video-section {
	position: relative;
	width:100%;
	margin:0 auto;
	border-radius: 10px;
	box-shadow: 0px 0px 0px 15px rgba(0,0,0,0.45);
}
.video-wrapper, figure.vimeo, figure.youtube {
	margin:0;
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0;
	height: 0;
	overflow: hidden;
	border-radius: 10px;
}	
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}	
figure.youtube a img, figure.vimeo a img {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: 100%;
	max-width:none;
}	
figure.vimeo a:after, figure.youtube a:after {
	content:"";
	width:60px;
	height:60px;
	background: rgba(255, 255, 255, 0);
	z-index:9;
	position:absolute;
	top:50%;
	left:50%;
	margin:-30px 0 0 -30px;
	border-radius:50%;
*/    
	/*box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.15);*/
/*	cursor: url('../images/play_b.png') 30 30,pointer;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
    visibility: hidden;
}
*/
/*
figure.vimeo:hover a:after, figure.youtube:hover a:after {
	box-shadow: 0px 0px 0px 1000px rgba(0,0,0,0.1);
    visibility: hidden;
}
figure.vimeo:hover a:after, figure.youtube:hover a:after{
	opacity: 0;
}
figure.vimeo a:before, figure.youtube a:before {
	border-left: 8px solid #212121;
    visibility: hidden;
}
figure.vimeo a:before, figure.youtube a:before {
	content:"";
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	z-index:10;
	position:absolute;
	top:50%;
	left:50%;
	margin-left: -3px;
	margin-top: -5px;
	display:block;
	cursor: url('../images/play_b.png') 30 30,pointer;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
    visibility: hidden; 
}
figure.vimeo:hover a:before, figure.youtube:hover a:before {
	border-color: transparent;
}	
figure.vimeo a:hover img, figure.youtube a:hover img {
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}	
figure.vimeo a img, figure.youtube a img {
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
	border-radius: 10px;
	cursor: url('../images/play_b.png') 30 30,pointer;
}
*/

/* #Link to page
================================================== */
/*
.link-to-portfolio {
	  position: fixed;
    top: 30px;
    right: 30px;
    z-index: 20;
    cursor: pointer;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 3px;
    background-position: center center;
    background-size: cover;
    background-image: url('../visuels/index_graph_terre.jpg');
    box-shadow: 0 0 0 2px rgba(255,255,255,.3);
    transition: opacity .2s, border-radius .2s, box-shadow .2s;
    transition-timing-function: ease-out;
}
.link-to-portfolio:hover {
    opacity: 0.8;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,0);
}
*/

/* SPECIAL IPAD ( TABLET ) */
@media only screen and (min-device-width: 768px) and (orientation: portrait) {
    .video-container {
        position: absolute;
        /*top: 50%;*/
        left: 0;
        width: 100%;
    }
  }

  

/* ================================================ */

#citations {
   /* 
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -ms-transition: opacity .3s;
    transition: opacity .3s;

    -webkit-animation: opacity 1s step-start 0s infinite;
    -moz-animation: opacity 1s step-start 0s infinite;
    -ms-animation: opacity 1s step-start 0s infinite;
    animation: opacity 1s step-start 0s infinite;*/
}

.citation {
    font-family: 'Overpass', sans-serif;
    font-size: 2.4em;
    line-height: 1vh;
    line-height: 8vh;  
    vertical-align:middle;    
}

.citation h1{
    font-family: 'Overpass', sans-serif;
    font-size: 2.4em;
    line-height: 1vh;
    line-height: 8vh;  
    vertical-align:middle;   
}

.auteur {
    font-size: 0.75em;
    text-align: right;    
}
/* ================================================ */


@media screen and (max-width: 768px) {
    .citation {
        
        font-size: 4em;
        line-height: 1vh;
        line-height: 9vh;      
    }
    .citation h1{    
        font-size: 2.2em;
        line-height: 1vh;
        line-height: 16vh;            
    }
  }