*::before, *::after, a * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html{
	height: 100%;
	background: rgb(40, 40, 40);
}
body {
	min-height:300px;
	height: 100%;
	color: black;
	font-size: 16px;
	font-family: helvetica, Calibri, Arial, sans-serif;
	line-height: 1.5em;
}
img, object, embed, canvas, video, audio {
	max-width: 100%;
	height: auto;
}
svg {
	max-width: 100%;
}
header{height: 0} 

.wrapper{
	overflow: hidden;
	margin: 0 auto;
	max-width: 1280px;
	/*	 height: 100%;*/
	/*     min-height: 970px;*/
}
.wrapper-L{
	overflow: hidden;
	margin: 0 auto;
	max-width: 1920px;
}
.wrap2{
	margin: auto;
	width: 90%;
}
main{
/*
	position: absolute;
	top: 0;
*/
	padding: 0;
	min-height: 490px;
	width: 100%;
/*	height: 96%;*/
}
strong {
	min-height:500px;
	height: 100%;
	font-weight: 500;
	font-size: 16px;
	font-family: helvetica, Calibri, Arial, sans-serif;
	line-height: 1.5em;
}
#content {
	display: block;
	margin: 1% 0 1% 0;
	padding: 1% 0;
	height: auto;
}
.content-ctr{
    width: 100%
}

.content-ctr h2{
    margin: 5em 0 0 0;
/*    min-height: 70px;*/
	padding: 0 1px;
	color: darkgoldenrod;
	text-align: center;
    font-size: 1.8em;
    line-height: 1.5em;
        font-weight:500
}
.ctr-img{
	display: block;
	margin: 5% auto 5% auto;
}
video[poster], .img-fd3D {
    width: 92%;
    margin: 4%;
}
.img-fd{
    background-color: black;
}
.pos-a {
    position: absolute;
    top: 0;
    z-index: -10;
}

#ref-pos, .ref-pos{ 
    position: relative;
}
.i-max {
    width : 100%;
	margin: 2% auto;
}

.fd-image {
	min-height: 2280px;
	height: 110%;
	background: url(../img/fd-msq-motif7.svg);
	background-color: rgb(40, 40, 40);
	background-size: cover;
	background-repeat: repeat-y;
	background-blend-mode: screen;
}
#fd-img{
	background:url(../img/soleil-panneaux1.jpg);
	background-color: rgb(20,20,20);
	background-position:30% 20%;
	background-origin: content-box; 
	background-size:cover;
	background-repeat:no-repeat;
}
#fd-3Dimg{
	position:relative;
background:url(../img/cube3D_cyripgraphics.jpg);
	background-color: rgb(0,0,0);
    background-attachment: local;
	background-position-x:center;
    	background-position-y:center;
	background-origin: border-box; 
	background-size:cover;
	background-repeat:no-repeat;
    min-height: 1000px;
    height: 100%;
    width: 100%;
/*max-width: 1800px;*/
    margin: 0 auto;
}
/*
#fd-img{
	background-color: rgb(20,20,20);
}
*/
figure{
	display: block;
	margin: 0;
	width:100%;
	height: auto;
}
#figcaption{
    position: absolute;
bottom: 2%;
   right: 0%;
/*    bottom: -7.6%;*/
	margin: 0% 5% 0% 0%;  
	padding: 10px;
	min-width: 350px;
	width: 19%;
	background-color:rgba(240,240,240,0.55);
	mix-blend-mode:luminosity;
    color: black;
} 
.figcaption{
    position: absolute;
bottom: 0%;
   right: -4%;
    bottom: -10%;
	margin: 0% 5% 0% 0%;  
	padding: 10px;
	min-width: 300px;
	width: 18%;
	background-color:rgba(240,240,240,0.55);
	mix-blend-mode:luminosity;
    color: black;
}   
.figc-v{
    display: block;
    margin:-4% 4% 4% 4%;
}
.figc-ct{
    display: block;
    margin:-4% 21% 4% 21%;
}
.x2 {
    width: 200%     
}

/*Attention à l'absolute!*/
footer{
	position: relative;
	margin: 50px 0 0 0;
	width: 100%;
	height: 50px;
	/*     position: absolute;*/
	/*     top:100%;*/
	/*     bottom:0px;*/
	/*     background-color: rgba(220,220,220,0.2);*/
}
nav{
    position: relative;
	top: 0;
	z-index: 5;
	min-height: 40px;
	width: 100%;
	height: 5%;
	text-align: center;
}
.list
{
	margin: 0 0 .5em 0 ;
	padding: 1% 3% 0 5%;
	text-align: left;
}
nav ul{
	margin: 0;
	padding: 0;
	background-color: rgba(20,20,20,0.7);
}
nav ul li {
	display: inline-block;
	min-width: 107px;
	width: 12%;
}
nav ul li h2{
	font-weight: 400;
	font-size: 1em;
}
nav ul li a{
	display: block;
	padding: 0;
	min-height: 15px;
	max-width: 180px;
	height: 27px;
	color: whitesmoke;
	text-decoration: none;
	letter-spacing: 0.055em;
	font-weight: 300;
	line-height: 27px;
}
nav ul li a:hover{
	letter-spacing:0.06em;
	font-weight: 500;
}
.is-active {
	color: crimson;
}
.is-active-c {
	color: cyan;
}
.slideUp {
	visibility: visible !important;
	-webkit-animation: slideUp .75s ease;
	-moz-animation: slideUp .75s ease;
	animation: slideUp .75s ease;
}
#btn-nav{
	position: absolute;
	top: 13px;
	right: 3%;
	z-index: 30;
	display: block;
	width: 50px;
	height: 70px;
}
#btn-menu{
	height: 60px;
	width: 30px;
	padding: 20px 6px 10px 2px;
	margin: 0 20px 0 -10px;
}
#menu3b,.dnone {
	display:none;
}
#croix-menu{
	/*	display:none;*/
	opacity: 0;
	position: absolute;
	top: 0;
}
#menu-croix{
	width: 35px;
}
#hpage{
	width: 29px;
	/*     margin: 0.5% 2%;*/
}
.disp-t {
	display: table;
	width: 80%;
    min-width: 680px;
	table-layout: fixed;
  margin: 4% auto;
}
.disp-t .wrapper {
	display: table;
	width: 100%;
	table-layout: fixed;
    margin: 4% auto;
}
.disp-tr {
	display: table-row;
	padding: 20px 0;
	-webkit-transition: all 600ms;
	-moz-transition: all 600ms ease;
	-ms-transition: all 600ms ease;
	-o-transition: all 600ms ease;
	transition: all 600ms ease;
}
.disp-tc {
	display: table-cell;
	margin: 0;
	padding: 10px 20px;
	min-width: 450px;
}
h2 {
    font-size: 2em;
	font-weight: 500;
}
h4, h5, h3{
	font-weight: 600;
	font-size: 1em;
}
.txt-b{
	color: #eaeaea;
}
.txt-ctr{
	margin: 10px auto;
	text-align: center;
}
#content h3{
	padding: 3% 3% 1% 2%;
	text-align: left;
}
p {
	margin: 0 0 .5em 0 ;
	padding: 1% 3% 0 2%;
	text-align: left;
}
#crea, #grap, #phot, #webd {
	display: block;
	margin: 50px auto 20px auto;
	padding: 0 10px;
	width: 100%;
	height: 1.3em;
	color: rgba(200,200,200,0.4);
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1.3em;
}
#phot {
	color: rgba(120,120,120,0.5);
	text-indent: -9999px;
	font-size: 7.4vmax;
	mix-blend-mode: exclusion;
}
#grap {
	margin: -10% auto 0 auto;
	font-size: 8vh;
}
#webg {
	display: block;
	margin: 20px auto 20px auto;
/*	padding: 0 10px;*/
	width: 100%;
	height: 1.3em;
	color: rgba(150,150,150,0.9);
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 8vh;
	line-height: 1.3em;
	mix-blend-mode: difference;
}
#webd {
	margin: 10% auto 0 auto;
	text-indent: -9999px;
	font-size: 9vh;
}
#crea{
	margin: 280px auto 20px auto;
	font-size: 8vh;
}
#crea-i, #webd-i, #webg-i, #phot-i, .web3d {
/*	height: 1.2em;*/
	color: beige;
	text-align: center;
	font-weight: 400;
	font-size: 1.5em;
	line-height: 1.2em;
}
#phot-i {
	margin: 30% auto 0 auto;
	background-color: rgba(20,20,20,0.1);
	font-size: 2.6em;
	line-height: 53px;
	mix-blend-mode: exclusion;
	mix-blend-mode: difference;
}
#crea-i {
	margin: 20px auto 0 auto;
}
#webd-i {
	margin: 40px auto 0 auto;
}
#webg-i {
	margin: 2% auto 2% auto;
}
    .web3d, .i3d{
    margin-top: 2em;
}
#comment h4{
	font-weight: 500;
	font-size:1em;
}
#comment {
	margin: 20% 5% 30% 57%;
	min-width: 360px;
	color: rgb(250, 250, 250);
	text-align: left;
	font-size: 100%;
}
.invrs {
	background-color: #fcfcfc;
	opacity:0.5;

	mix-blend-mode:difference;
}
.fd-n{
/*	margin: 10px 0;*/
	background-color: rgba(20,20,20,0.4);
	color:rgb(250, 250, 250);
	background-blend-mode:darken;
}
.l50 {
	position: relative;
	top: -157px;
	left: 16.5%;
	min-width: 320px;
	min-height: 320px;
	width: 100%;
}
.l33 {
	position:relative;
	min-width: 320px;
	min-height: 320px;
	width: 50%;
}
.l33:hover img svg{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 12px 5px #ffffff;
	-moz-box-shadow: 0px 0px 12px 5px #ffffff;
	box-shadow: 0px 0px 12px 5px #ffffff;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=12);

	-o-box-shadow: 0px 0px 12px 5px #ffffff;
}
#pictos {
	margin: 22% auto 0 auto;
	padding: 1% 0;
}
#pictos img, #pictos svg{
 max-height:300px;
height:auto;
	/*	background: url(../m0.svg);*/
	padding: 7%;
}
#pictos img:hover{
	width: auto;
	background: url(../img/motif4c8px.svg);
	-webkit-transition: background 600ms ease-in-out;
	-moz-transition: background 600ms ease-in-out;
	-ms-transition: background 600ms ease-in-out;
	-o-transition: background 600ms ease-in-out;
	transition: background 600ms ease-in-out;
}
#logo{
	height: 60px;
}
#logo a{
	display: block;
	min-height: 150px;
	height: inherit;
}
#logo img,#logo svg{
	position: absolute;
	top: 9%;
	left: 0;
	z-index: 10;
	padding: 1% 25% 2% 25%;
	width: inherit;
	text-align: center;
}
#logo svg{
	height: auto;
}
#cyripgraphics{
	margin: -1.8% 0;
}

#logo-h1{
	margin: 40px 0 0 0;
	text-indent: -9999px;
}
#fd-img header #logo a img, header #logo a img#logo-s{
	padding: 10px 50% 0 10%;
	min-width: 100px;
	width: 80%;
}
.ilst-h2 {
	position: absolute;
	text-indent: -9999px;
}
.exe {
	margin: 10px auto;
	width: 80%;
}
[role="banner"] img{
	display: block;
	margin: 1% auto 1% auto;
}
.fd-msq,.cmasq{
	background-color: red;
}
.ipicto{
	margin: 2% 40% 2%;
	text-align: center;
}
.disp-t h2{
	padding: 5px 0 2px 0;
	text-align: center;
    padding: 0 1px;
	color: darkgoldenrod;
}

.disp-t h3, .disp-t h4{
	padding: 4% 3% 1% 2%;
	text-align: left;
}
.disp-t h4{
	margin: 1em 0;
}
#ap1 {
	position: relative;
	/*	margin: 11% 20% 60% 36%;*/
	padding: 0 0 40px 0;
	min-width: 460px;
	min-height:600px;
	width: 100%;
	/*	height: 72%;*/
color:black;
	background: none;
	/*		color: rgba(230,230,230,0.7);*/
	/*		background-color: rgba(255,255,255,-19.7);*/


	/*		background-blend-mode:multiply;*/
}
/*#ap1 div p{color: rgba(20,20,20,0.9)}*/
.fd-fx{position: absolute;
	z-index: -10;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.2) 21%, rgba(255,255,255,0.45) 62%, rgba(255,255,255,0.6) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.2) 21%,rgba(255,255,255,0.45) 62%,rgba(255,255,255,0.6) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.2) 21%,rgba(255,255,255,0.45) 62%,rgba(255,255,255,0.6) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#99ffffff',GradientType=0 );
	mix-blend-mode:screen;
	/*
	width: inherit;
	height: auto;
	*/	
	/*		background-color: rgba(255,255,255,-19.7);*/

	-webkit-backdrop-filter: blur(21px);
	backdrop-filter: blur(21px);
}
#ap2 {
	width: 100%;
	margin: 20px auto;
}
#wrapper-d {
	width:40%;
	height: 100%;
	margin: 100px 15% 0 auto;
}
#adml {
	margin: 4px 12px 0 6px;
	padding: 0;
	width: 46%;
	height: 31px;
}
/*
#ap1 #adml{
margin: -6px 0 0 15px;
padding: 6px 0 0 0;
width: 20%;						
line-height: 12px;
height: 30px;
}	
*/
/*
#ap1:hover #adml {
background-color: rgba(250, 250, 250, 0.8);
-webkit-filter: blur(0);
-ms-filter: blur(0);
filter: blur(0);
-webkit-transition: all 0.3s ease-in-out ;
-moz-transition: all 0.3s ease-in-* ;
-ms-transition: all 0.3s ease-in-out ;
-o-transition: all 0.3s ease-in-out ;
transition: all 0.2s ease-in-out ;

-moz-filter: blur(0);
-o-filter: blur(0);
}
#ap1 #adml:hover {
background-color: rgba(250, 250, 250, 0.8);
-webkit-filter: blur(0);
-ms-filter: blur(0);
filter: blur(0);
-webkit-transition: all 0.3s ease-in-out ;
-moz-transition: all 0.3s ease-in-out ;
-ms-transition: all 0.3s ease-in-out ;
-o-transition: all 0.3s ease-in-out ;
transition: all 0.3s ease-in-out ;

-moz-filter: blur(0);
-o-filter: blur(0);
*/
/*:hover sur #hpage = opacity sur #fd*
#hpage:hover #fd{
opacity: 0.4;
-webkit-transition: all 0.3s ease-in-out ;
-moz-transition: all 0.3s ease-in-out ;
-ms-transition: all 0.3s ease-in-out ;
-o-transition: all 0.3s ease-in-out ;
transition: all 0.3s ease-in-out ;
}
#ap1 #adml {
margin: 2% 0 0 240px;
padding: 5px 0px 5px 0;
width: 40%;
height: 41px;
border: 2px solid #f56b00;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
background-color: rgba(255, 255, 255, 0.35);
-webkit-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(3px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
}	
*/
#ap1 h3{
	padding: 2%;
}
/*bouton slide cache adresse*/
/*l'adresse en svg et le commentaire "adml-comment" sont fixes dans le contenant*/
#btns{
	position: absolute;
	top: 7px;
	left: 32px;
	z-index: 20;
}
#btns a{
	text-decoration:none; 

}
#tri{
	display: inline;
	position : absolute;
	top : 11px;
	left : 147px;
	width : 10px;
	width: 0;
	height : 12px;
	height: 0;
	border-width: 6px 0 6px 12px;
	border-style: solid;
	border-color: transparent transparent transparent #ffffff;
}
#btn-j{
	position : absolute ;
	top : 2px;
	left : 3px;
	width : 170px;
	height : 32px;
	-webkit-border-radius : 5px;
	-moz-border-radius : 5px;
	border-radius : 5px;
	background : -moz-linear-gradient(50% 100% 90deg,rgba(255, 162, 0, 1) 0%,rgba(252, 156, 0, 1) 21.25%,rgba(244, 138, 0, 1) 50.53%,rgba(231, 109, 0, 1) 84.33%,rgba(224, 93, 0, 1) 100%);
	background : -webkit-linear-gradient(90deg, rgba(255, 162, 0, 1) 0%, rgba(252, 156, 0, 1) 21.25%, rgba(244, 138, 0, 1) 50.53%, rgba(231, 109, 0, 1) 84.33%, rgba(224, 93, 0, 1) 100%);
	background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(255, 162, 0, 1) ),color-stop(0.2125,rgba(252, 156, 0, 1) ),color-stop(0.5053,rgba(244, 138, 0, 1) ),color-stop(0.8433,rgba(231, 109, 0, 1) ),color-stop(1,rgba(224, 93, 0, 1) ));
	background : -o-linear-gradient(90deg, rgba(255, 162, 0, 1) 0%, rgba(252, 156, 0, 1) 21.25%, rgba(244, 138, 0, 1) 50.53%, rgba(231, 109, 0, 1) 84.33%, rgba(224, 93, 0, 1) 100%);
	background : -ms-linear-gradient(90deg, rgba(255, 162, 0, 1) 0%, rgba(252, 156, 0, 1) 21.25%, rgba(244, 138, 0, 1) 50.53%, rgba(231, 109, 0, 1) 84.33%, rgba(224, 93, 0, 1) 100%);
	background : linear-gradient(0deg, rgba(255, 162, 0, 1) 0%, rgba(252, 156, 0, 1) 21.25%, rgba(244, 138, 0, 1) 50.53%, rgba(231, 109, 0, 1) 84.33%, rgba(224, 93, 0, 1) 100%);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA200', endColorstr='#E05D00' ,GradientType=0)";
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E05D00',endColorstr='#FFA200' , GradientType=0);
}
.ferm {
	opacity: 0;
	color: white;
	padding: 6px 7px;
	margin: 0px 0 0 31px;
	text-decoration:none; 
}
.ouv {
	opacity: 1;
	color: white;
	text-decoration:none; 
	padding: 6px 61px;
	margin: 0 -30px;
}
#fd-btn {					
	position : absolute ;
	top : 4px;
	left : 9%;
	margin: 0 auto;
	width : 364px;
	height : 35px;
	border-width : 3px;
	border-style : Solid;
	border-color : #F67F00;
	border-color : rgba(246, 127, 0, 1);
	-webkit-border-radius : 9px;
	-moz-border-radius : 9px;
	border-radius : 9px;
	background : -moz-linear-gradient(50% 100% 90deg,rgba(255, 255, 255, 1) 0%,rgba(249, 249, 249, 1) 17.4%,rgba(231, 231, 231, 1) 41.37%,rgba(202, 202, 202, 1) 69.16%,rgba(162, 162, 162, 1) 99.63%,rgba(161, 161, 161, 1) 100%);
	background : -webkit-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 17.4%, rgba(231, 231, 231, 1) 41.37%, rgba(202, 202, 202, 1) 69.16%, rgba(162, 162, 162, 1) 99.63%, rgba(161, 161, 161, 1) 100%);
	background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(255, 255, 255, 1) ),color-stop(0.174,rgba(249, 249, 249, 1) ),color-stop(0.4137,rgba(231, 231, 231, 1) ),color-stop(0.6916,rgba(202, 202, 202, 1) ),color-stop(0.9963,rgba(162, 162, 162, 1) ),color-stop(1,rgba(161, 161, 161, 1) ));
	background : -o-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 17.4%, rgba(231, 231, 231, 1) 41.37%, rgba(202, 202, 202, 1) 69.16%, rgba(162, 162, 162, 1) 99.63%, rgba(161, 161, 161, 1) 100%);
	background : -ms-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 17.4%, rgba(231, 231, 231, 1) 41.37%, rgba(202, 202, 202, 1) 69.16%, rgba(162, 162, 162, 1) 99.63%, rgba(161, 161, 161, 1) 100%);
	background : linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 17.4%, rgba(231, 231, 231, 1) 41.37%, rgba(202, 202, 202, 1) 69.16%, rgba(162, 162, 162, 1) 99.63%, rgba(161, 161, 161, 1) 100%);
	font-size: 16px;
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#A1A1A1' ,GradientType=0)";
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A1A1A1',endColorstr='#FFFFFF' , GradientType=0);
}
#fd-btn:target #btn-j{
	position : absolute ;
	top : 2px;
	left : 183px;
	width : 178px;
	height : 32px;	
	-webkit-transition: all 140ms ease-in-out;
	-moz-transition: all 140ms ease-in-out;
	-ms-transition: all 140ms ease-in-out;
	-o-transition: all 140ms ease-in-out;
	transition: all 140ms ease-in-out;
}
#fd-btn:target .ouv{
	opacity: 0;
	text-decoration:none; 
}
#fd-btn:target .ferm{
	opacity: 1;
	text-decoration:none; 
}
#fd-btn:target #tri{
	display: none;
}
/*position uniquement pour la page apropos:*/
ap1 #fd-btn{
	position: relative;
	bottom: 50px;
	right:40px; 
}
/*===========Fin btn cache adresse===========*/
#ap-foo {
	width: 100%;
	height: 40px;
	position: relative;
	bottom:0%;
	right: 0;
}
/*
#nav-foo{
height: 50px;
position: absolute;
bottom: 0;
}
*/
#nav-foo li:first-child{
	position: absolute;
	top: -10px;
	left: 3%;
	min-width: 40px;
	list-style-type: none;
}
#ap-com {
	margin: 3% 0 10px 0;
	color: rgba(252, 156, 0, 0.83);
}
#Cpnom {
	margin: 45px auto 0 auto;
}
#adml-comment {
	position: absolute;
	top: 2px;
	right: -11px;
	width: 52%;
	height: 32px;
	/*	font-size: 15px;*/
	line-height: 32px;
}
Cpnom, ap-com{
	display: block;
}
#scroll-nav {
	position: relative;
	top: -100px;
	left: 50%;
	opacity: 0.6;
	margin: 0 auto;
}
#ctnu {
    margin: 4% 0 4% 0; 
    width: 100%;
}
a[href="infographics.html#govideo"]:link,a[href="3D.html#govideo"]:link {
  color: #95f3ff;
}
a[href="infographics.html#govideo"]:visited,a[href="3D.html#govideo"]:visited {
  color: #c9c2ff;
}
a[href="infographics.html#govideo"]:hover,a[href="3D.html#govideo"]:hover {
  color: #ff9f3f;
}
/*=====================mobile======================*/



@media only screen and (max-width: 768px) and (min-width: 640px) {

	.fd-image{
		min-height: 1980px;
		background-size: 110%;
	}
#fd-3Dimg{
	position:relative;
background:url(../img/cube3D_cyripgraphics.jpg);
	background-color: rgb(0,0,0);
    background-attachment: local;
	background-position-x:center;
    	background-position-y:center;
	background-origin: border-box; 
	background-size:cover;
	background-repeat:no-repeat;
    min-height: 600px;
    height: 100%;
    width: 100%;
    margin: 0 auto;
}
	#logo img, #logo svg{
		position: absolute;
		top: 3%;
		left: 9%;
		z-index: 10;
		margin: 0 auto;
		padding: 0;
		width: 80%;
		/*			 min-width: 250px;*/
		-webkit-transition: all 600ms;
		-moz-transition: all 600ms ease;
		-ms-transition: all 600ms ease;
		-o-transition: all 600ms ease;
		transition: all 600ms ease;
	}
	#cyripgraphics{
		margin: 5% 0;
	}
	#fd-img header #logo a img, header #logo a img#logo-s{
	padding: 2% 27% 0 9%;
		width: 100%;
	}
   video[poster], .img-fd3D {
        width: 100%;
       margin: 20px 0;
} 
	[role="banner"] img{
		margin: 3% auto 1% auto;
	}
    .x2 {
    width: 200%     
}
    	#figcaption, .figcaption{
		background-color:rgba(240,240,240,0);
		text-indent: -9999px;
	}
	#btn-nav {
		top: 58%;
		right: 2%;
		display: block;
		width: 30px;
	}
	#menu3b {
		display:block;
		opacity:0.7;
	}
	#nav-menu{
		top: 11px;
		position:absolute;
		right: -215px;
	}
	nav ul{
		/*
		top: 11px;
		position:absolute;
		right: 0;
		*/
		z-index: 20;
		margin: -22px 0;
		padding: 50px 0 10px 0;
		text-align: center;
		-webkit-transition: all 600ms ease-in-out;
		-moz-transition: all 600ms ease-in-out;
		-ms-transition: all 600ms ease-in-out;
		-o-transition: all 600ms ease-in-out;
		transition: all 600ms ease-in-out;
	}
	nav ul li {
		display:block;
		margin: 0;
		padding: 0;
		min-width: 220px;
		width: 33%;
		height: 56px;
		-webkit-transition: all 600ms;
		-moz-transition: all 600ms ease;
		-ms-transition: all 600ms ease;
		-o-transition: all 600ms ease;
		transition: all 600ms ease;
	}
	nav ul li a{
		display:block;
		margin: 0;
		padding: 0 7px;
		height: 100%;
		text-align: left;
		font-weight: 200;
		font-size: 1.5em;
		line-height: 54px;
		-webkit-transition: all 600ms;
		-moz-transition: all 600ms ease;
		-ms-transition: all 600ms ease;
		-o-transition: all 600ms ease;
		transition: all 600ms ease;
	}
	#phot {
		color: dimgrey;
		font-size: 6vh;
	}
	#webd {
		margin: 0 auto 2px auto;
		font-size: 6.7vh;
	}

	#crea{
		margin: 190px auto 20px auto;
		font-size: 7vh;
	}
	#grap {
		font-size: 8vh;
	}
	#comment {
		margin: 30% 5% 10% 51%;
		padding: 1%;
		min-width:300px;
		letter-spacing: 0.5px;
		font-size: 90%;
	}
	#phot-i {
		font-size: 2em;
	}
	#crea-i {
		margin: 20px auto 0 auto;
		font-size: 1.5em;
	}
	#webg-i {
		margin: -5% auto 1% auto;
		font-size: 1.5em;
	}
    .content-ctr h2{
    margin: 5em 0 0 0;
        min-height: 40px;
	padding: 0 1px;
	color: darkgoldenrod;
	text-align: center;
    font-size: 1.8em;
/*    line-height: 1.8em;*/
        font-weight:500
}
	#ap1 {
		margin: 20% 20px 10% 0px;
		min-width: 550px;
		/*		min-height:540px;*/
		width: 100%;
/*		background-color: rgba(245,245,245,0.5);*/
	}
	#wrapper-d {
		width:90%;
		height: 100%;
		margin: 100px auto;
	}

	.disp-t h3, .disp-t h4{
		padding: 6px 0 0 10px;
		text-align: left;
	}
    	.disp-t {
		width: 100%;
/*		table-layout: inherit;*/
         margin: 2% 0;
	}
	.exe {
		margin: 2px 2px;
		width:96%;
	}

	/*	pour mobile au target sur le menu primaire #nav pour faire apparaitre les "li" du menu .
	gestion de l'apparition du menu "au slide"*/
	#nav:target #nav-menu{
		/*		display: block;*/
		top: 11px;
		position:absolute;
		right: 0;
		opacity:1;
			-webkit-transition: all 600ms ease-in-out;
		-moz-transition: all 600ms ease-in-out;
		-ms-transition: all 600ms ease-in-out;
		-o-transition: all 600ms ease-in-out;
		transition: all 600ms ease-in-out;
	}
	#nav:target #btn-menu{
		/*		display: none;*/
		opacity:0;
		/*		height: inherit;*/
		-webkit-transition: all 600ms ease-in-out;
		-moz-transition: all 600ms ease-in-out;
		-ms-transition: all 600ms ease-in-out;
		-o-transition: all 600ms ease-in-out;
		transition: all 600ms ease-in-out;
	}
	#nav:target #croix-menu{
		/*		display: block;*/
		opacity:1;
		right: 3%;
		-webkit-transition: all 600ms ease-in-out;
		-moz-transition: all 600ms ease-in-out;
		-ms-transition: all 600ms ease-in-out;
		-o-transition: all 600ms ease-in-out;
		transition: all 600ms ease-in-out;
	}
	#scroll-nav {
		top: 10px;
	}
    .disp-tc .list ul li {
   padding: 0; 
}
}
/*	 =========smartphone========================================*/



@media only screen and (max-width: 640px) and (min-width: 351px) {
    
	img, object, embed, canvas, video, audio {
		max-width: 100%;
		height: auto;
	}
	.fd-image{
		min-height: 2140px;
		background-size: 300%;
	}
	.prst img{
		margin: 18% auto 1% auto;
	}
	#logo img, #logo svg{
		position: absolute;
		top: 2.5%;
		left: 9%;
		z-index: 10;
		padding: 0;
		min-width: 250px;
		width: 80%;
		-webkit-transition: all 600ms;
		-moz-transition: all 600ms ease;
		-ms-transition: all 600ms ease;
		-o-transition: all 600ms ease;
		transition: all 600ms ease;
	}
	#cyripgraphics{
		margin: -2% 0;
	}
	#fd-img header #logo a img,header #logo a img#logo-s{
		/*	min-width: 90px;*/
		padding: 0px 0% 0 10%;
		width: 70%;
	}
    .x2 {
    width: 125%     
}

    .i3d{
    margin-top: 2em;
} 
    .web3d{
    margin: 10px 1px 0px 1px;
    font-size: 1.2em;
    font-weight: 300;
}
       video[poster], .img-fd3D {
width: 100%;
         margin: 25px 0;
} 
	.txt-fond{
		margin: 0px 0 0 0;
		height: 1.8em;
		text-align: center;
		font-size: 11vmin;
		line-height: 1.8em;
	}
	#webd,#crea{
		margin: 170px auto -100px auto;
		font-size: 7vh;
	}
	#crea-i {
		margin: 200px auto 180px auto;
		text-align: center;
/*		font-size: 1.7em;*/
	}
	#webg-i {
		margin:10% auto 15% auto;
		font-size: 1.5em;
	}
	#webd-i {
		display: block;
		margin: 4% auto 10% auto;
		font-size: 1.7em;
	}
    
	#comment {
		margin: 30% 5% 10% 0%;
		padding: 1%;
		width: 100%;
		color: beige;
	}
	#content h3{
		padding: 3% 3% 1% 1%;
		text-align: left;
	}
	h4, .disp-t p, .disp-t a, .disp-t h4, .disp-t h3 {
		padding:0 1% ;
	}
    h2 {
	font-weight: 300;
}
    .disp-t h2{
        font-size: 1.2em;
    }
/*
	.disp-t h3{
		font-weight: 200;
	}
*/
	#menu3b {
		display:block;
		opacity:0.8;
	}
	#btn-nav{
		right: 1%;
		top: 22px;
		padding: 0px;
		width: 25px;
		height: 58px;
	}
	body{
		font-size: 1em;
		line-height: 1.4em;
	}
	/* strong {
	font-size: 1.1em;
	line-height: 1.4em;
}
	*/
	#phot {
		margin: 18px 2% 20px 0%;
		color: dimgrey;
		font-size: 3.2vh;

		mix-blend-mode:exclusion;
	}
	#grap {
		margin: -480px auto 20px auto;
		font-size: 4.7vh;
	}
	#webg {
		margin: 0px auto 2px auto;
		font-size: 4vh;
	}
	#webd {
		margin: 13px auto 2px auto;
		font-size: 3.8vh;
	}
	#phot-i {
		font-size: 1.1em;
	}
  .content-ctr h2{
    margin: 3em 0 1em 0 ;
    font-size: 1.2em;
      min-height: 30px;
      line-height: 1.2em;
      height: 1.2em;
        font-weight: 450;
}
	.disp-t, .disp-tr, .disp-tc {
		display: block;
		padding: 2.5% 0;
		-webkit-transition: all 600ms;
		-moz-transition: all 600ms ease;
		-ms-transition: all 600ms ease;
		-o-transition: all 600ms ease;
		transition: all 600ms ease;
	}
    	.disp-t {
		width: 100%;
         margin: 2% 0;
        min-width: 310px;
	}
	/*
	.disp-tr {
	margin: 0px 1%;
}
	*/
	.disp-tc {
		margin: 0 auto;
		min-width: 300px;
		width: 100%;
		-webkit-transition: all 600ms;
		-moz-transition: all 600ms ease;
		-ms-transition: all 600ms ease;
		-o-transition: all 600ms ease;
		transition: all 600ms ease;
	}
	#ap1 {
		margin: 70px 0;
		padding: 7% 1%;
		min-width: 320px;
		min-height:790px;
		width: 100%;
/*		background-color: rgba(245,245,245,0.5);*/
	}
	#wrapper-d {
		width:98%;
		height: 100%;
		margin: 100px auto;
	}
	#nav-menu{
		/*		display: none;*/
		top: -512px;
		position:absolute;
		width: 98%

	}
	nav ul{
		margin: 0px 2%;
		padding: 70px 0 20px 0;
		text-align: center;
		-webkit-transition: all 600ms;
		-moz-transition: all 600ms ease;
		-ms-transition: all 600ms ease;
		-o-transition: all 600ms ease;
		transition: all 600ms ease;
	}
	nav ul li {
		display:block;
		min-width: 200px;
		width: 100%;
		height: 60px;
		line-height: 60px;
	}
	nav ul li a{
		margin: 0 auto;
		min-width: 310px;
		height: 62px;
		font-weight: 200;      
		line-height: 62px;
	}
	nav ul li h2 {
		margin: 0;
	}
    #nav {
    height: 0
}
	.l50 {
		position: relative;
		top: -598px;
		left: 30%;
		margin: 5px 6%;
		padding: 0;
		min-width: 200px;
		min-height: 200px;
		width: 46%;
		-webkit-transition: all 600ms;
		-moz-transition: all 600ms ease;
		-ms-transition: all 600ms ease;
		-o-transition: all 600ms ease;
		transition: all 600ms ease;
	}
	.l33 {
		position: static;
		margin: 5px 4%;
		padding: 0;
		min-width: 200px;
		min-height: 200px;
		width: 46%;
		-webkit-transition: all 600ms;
		-moz-transition: all 600ms ease;
		-ms-transition: all 600ms ease;
		-o-transition: all 600ms ease;
		transition: all 600ms ease;
	}
	#pictos {
		margin: 14% 0 0 0;
		padding: 0;
		width: 100%;
		-webkit-transition: all 600ms;
		-moz-transition: all 600ms ease;
		-ms-transition: all 600ms ease;
		-o-transition: all 600ms ease;
		transition: all 600ms ease;
	}
	.exe {
		margin: 2px 1px;
		width:100%;
	}
	#pictos img,#pictos svg{
/*        max-height:220px;*/
		height: auto;
        padding: 2%;
	}
	#figcaption, .figcaption{
		background-color:rgba(240,240,240,0);
		text-indent: -9999px;
	}
	#Cpnom {
		margin: -16px auto 0 auto;
	}

	#fd-btn {
		top :0;
		left: 4%;
	}
/*
		#fd-btn:target #btn-j{
position : absolute ;
	top : 2px;
	left : 162px;
	width : 170px;
	height : 32px;	
	}
*/
	/*btn du footer*/


	#nav-foo li:first-child{
		top: -70px;
		left: 2%;
	}
	#btn-menu{
		height: 60px;
		width: 30px;
		padding: 30px 6px 10px 2px;
		margin: 2px 21px 0 -10px;
	}
	/*	pour mobile au target sur le menu primaire #nav pour faire apparaitre les "li" du menu 
	gestion de l'apparition du menu "au slide"*/
	#nav:target #nav-menu{
		/*		 display: block;*/
		top:0;
		position:absolute;
		-webkit-transition: all 600ms ease-in-out;
		-moz-transition: all 600ms ease-in-out;
		-ms-transition: all 600ms ease-in-out;
		-o-transition: all 600ms ease-in-out;
		transition: all 600ms ease-in-out;
	}
	#nav:target #btn-menu{
		opacity: 0;
		-webkit-transition: all 600ms ease-in-out;
		-moz-transition: all 600ms ease-in-out;
		-ms-transition: all 600ms ease-in-out;
		-o-transition: all 600ms ease-in-out;
		transition: all 600ms ease-in-out;
	}
	#nav:target #croix-menu{
		/*			display: block;*/
		/*			display: inherit;*/
		right: 3%;
		width: 25px;
		opacity: 1;
		-webkit-transition: all 600ms ease-in-out;
		-moz-transition: all 600ms ease-in-out;
		-ms-transition: all 600ms ease-in-out;
		-o-transition: all 600ms ease-in-out;
		transition: all 600ms ease-in-out;
	}
	#scroll-nav {
		top: 0px;
		left: 0%;
		/*			height: 30px;*/
		width: 38px;
	}
#fd-3Dimg{
	position:relative;
background:url(../img/cube3D_cyripgraphics.jpg);
	background-color: rgb(0,0,0);
    background-attachment: local;
	background-position-x:center;
    	background-position-y:center;
	background-origin: border-box; 
	background-size:cover;
	background-repeat:no-repeat;
    min-height: 550px;
    height: 100%;
    width: 100%;
/*max-width: 1800px;*/
    margin: 0 auto;
}
    .figcaption {
    display: none
}
    .figc-v{
        font-size: 15px;
    display: block;
    margin: -4% 0 10% .5%;
}
    .figc-ct{
    display: block;
    margin:-2% 1% 4% 1%;
}
}
/*SSSSSSSSSSSSSSSSSSSSSSSSSSSS Smartphone SSSSSSSSSSSSSSSSSSSSSSSSSSSSS*/
@media only screen and (max-width: 350px) {

#fd-btn {
		top :0;
		left: -12px;
		/*		margin:10PX 0 0 -4PX;*/
		width : 340px;
		height : 41px;
		font-size: 0.9em;
	}

	#fd-btn:target #btn-j{
		position : absolute ;
		top : 2px;
		left : 162px;
		width : 170px;
		height : 32px;	
	}
	#btn-j{
		position : absolute ;
		left : 2px;
	}
	.ferm {
		margin: 0px 0 0 21px;
	}	
        #pictos img { 
        padding: 6%;
    }
#fd-3Dimg{
	position:relative;
background:url(../img/cube3D_cyripgraphics.jpg);
	background-color: rgb(0,0,0);
    background-attachment: local;
	background-position-x:center;
    	background-position-y:center;
	background-origin: border-box; 
	background-size:cover;
	background-repeat:no-repeat;
    min-height: 450px;
    height: 100%;
    width: 100%;
/*max-width: 1800px;*/
    margin: 0 auto;
}
    .web3d{
    margin: 8px 1px 4px 4px;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.2em;
    height: 1.2em;
}
    .content-ctr h2{
    margin-bottom: 1em;
    font-size: 1.4em;
    font-weight: 400;
    line-height: 1.2em;
    height: 2.1em;  
    }
     .disp-tc .list ul li {
   padding: 0; 
}   
    .disp-tc h2{
        font-size: 1.2em;
    }
    .figcaption {
    display: none
}
}