@font-face {
	font-family: 'Relevant';
	src: url('font/Relevant.eot');
	src: local('☺'), url('font/Relevant.woff') format('woff'), url('font/Relevant.svg') format('svg');
	font-weight: normal;
	font-style: normal;
	}
		 ::-webkit-scrollbar { 
    	 display: none; 
		 }
		 body {
         margin: 0px;
         font-family: 'Relevant';
         font-size: 1.2em;
         }
         img {
         width: 100%;	
         }
         a {
         text-decoration: none;
         color: inherit;
         }
         a:hover{
         }
         .intro {
         color: #222;
         padding: 6% 0% 0% 10%;
         }
         .titre {
         font-size: 3em;
         letter-spacing: 1px;
         line-height: 0.9em;
         margin-bottom: 3%;
         width: 30%;
         }
         #intro {
         font-size: 1em;
         width: 400px;
		 margin-left: 150px;
		 height: 94%;
		 overflow-y: scroll;
         }
         #tuto {
         font-size: 1.2em;
         text-decoration: underline;
         }
         .text{
         position: absolute;
		 width: 100%;
		 bottom: 60px;
		 text-align: center;
         }
         .arrow{
         position: absolute;
         height: 50px;
         width: 100%;
		 bottom: 30px;
		 text-align: center;
		 background-image: url(down-arrow.png);
		 background-repeat: no-repeat;
		 background-size: auto 100%; 
		 background-position: center;
		 opacity: 0.8;
         }
         #counter{
         position: absolute;
         width: 100%;
         top: 30px;
         text-align: center;
         }
         .image_wrap{
         width: 40%;
         margin: 0px auto;
         position: relative;
         -webkit-transition: margin 0.2s ease;
         transition: 0.2s ease;
         }
         .shape {
         height: 0px;
         width: 100%;
         -webkit-transition: height 0.2s ease;
         transition: 0.2s ease;
         }
         .grid {
         position: absolute;
		 top: 0px;
         width: 100%;
         display: none;
         overflow: hidden;
         }
         blockquote {
         width:30px;
         height:30px;
         background-color:none;
         float:left;
         margin: 0px 10px 5px 0px;
         }
         .palette {
         position: absolute;
         top: -3px;
         right: -140px;
         text-transform: uppercase;
         font-family: Helvetica, Arial;
         display: none;
         }
         .palette td {
         font-weight: Bold;
		 font-size: 0.7em;
		 letter-spacing: 0.05em;
         }
         .content {
         }
         .content-left {
         position: absolute;
         padding-top: 6%;
         left: 0px;
         background-color: #F2F2F2;
         width: 50%;
         -webkit-transition: width 0.2s ease;
         transition: 0.2s ease;
         }
         .content-right {
         position: absolute;
         padding-top: 6%;
         right: 0px;
         background-color: #FFF;
         width: 50%;
         -webkit-transition: width 0.2s ease;
         transition: 0.2s ease;
         }
         /*---- Scrollbar ----*/
         .content-left::-webkit-scrollbar { 
         display: none; 
         }
         .content-left::-moz-appearance:scrollbar { 
         display: none; 
         }
         .content-right::-webkit-scrollbar { 
         display: none; 
         }
         .content-right::-moz-appearance:scrollbar { 
         display: none; 
         }