@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap');
    
    
* {
  /* So 100% means 100%*/
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
text-decoration:none; 

}



html, body {
    background-color:white;


	line-height: 1;
	font-family:"hind", futura,  helvetica;
	cursor: url('../img/curseur.cur'), auto;
}


@media (prefers-color-scheme: dark) {
html,body {
    background-color:white;


	line-height: 1;
	font-family:"hind", futura,  helvetica;
	cursor: url('../img/curseur.cur'), auto;
}

}


@media (prefers-color-scheme: dark) {
.mycontact1 {
    color:white;
}

}



.hind-light {
  font-family: "Hind", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.hind-regular {
  font-family: "Hind", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.hind-medium {
  font-family: "Hind", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.hind-semibold {
  font-family: "Hind", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.hind-bold {
  font-family: "Hind", sans-serif;
  font-weight: 700;
  font-style: normal;
}


	
	
	/* scrollbar */

::-webkit-scrollbar {
	width: 8px;

}

::-webkit-scrollbar-track {
	background: none;
}

::-webkit-scrollbar-thumb {
	/*background:rgba(28, 128, 229, 0.38);*/
		background:rgba(0, 0, 0, 0.38);
}

-moz-selection{background-color:#fff411;}
::selection{background-color:#fff411;}
	
	
a{
cursor: url('../img/curseur3.cur'), auto;
}

button{
cursor: url('../img/curseur3.cur'), auto;
}	
	
input[type="submit"]{
cursor: url('../img/curseur3.cur'), auto;
}	

	
body#myindex{

}	


figcaption{
margin-top:5px;
}
	
.returnA{
margin-bottom:5px;
}
	
	
	
/**/.mymenu1A{
    display: flex;
background-color:rebeccapurple;

    justify-content: space-between;
    flex-flow: row;	
}	
	



.myintro{

    font-size: 2.4em;
    font-family: "hind", Futura, Helvetica, Arial, sans-serif;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-flow: column;
    height: 100%;
	margin-bottom:30px;
}

.myintroerror{

    font-size: 2.4em;
    font-family: "hind", Futura, Helvetica, Arial, sans-serif;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-flow: column;
    height: 100%;
}

.myintro H1 {
    position: relative;
    line-height: 1.5;
    animation: mymove2 0.65s;
    -webkit-animation: mymove2 0.65s;
    color: #1a0808;
}





.mymenu1, .mymenu1A{
height:0px;	
}

.vbvb1{
    line-height: 1.7;
}

.vbvb1 img{
margin-top:0px;
}


.homenav img{
width:65%;
}


.navmenu, .navmenu1 {
    text-decoration: none;
    font-family: "hind", Helvetica, sans-serif, arial;
    cursor: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
	background-color: white;
}

.navmenu ul {
    text-decoration: none;
    margin-top: 19px;
    margin-bottom: 24px;
    background-color: ;
    /*display: flex;
    flex-flow: row wrap;
    align-items: center;
     justify-content: center; */
    margin-left: 40px;
    margin-right: 6px;
}

.navmenu1 ul {
    text-decoration: none;
    background-color: ;
    /* justify-content: center;*/
    margin-left: 40px;
    margin-right: 33px;
	padding-top: 10px; 
}

.navmenu li, {
    display: inline-block;
    text-decoration: none;
    font-family: "hind", Helvetica, sans-serif, arial;
    margin-right: 35px;
}

.navmenu1 li{
    display: inline-block;
    text-decoration: none;
    font-family: "hind", Helvetica, sans-serif, arial;
}

.navmenu a, .navmenu1 a{
text-decoration none;
}




.TextIntro1{
   /* border-bottom: 3px solid #46c3bc;*/
    opacity: 1;
    -webkit-transition: 0.6s ease-out;
-moz-transition: 0.6s ease-out;
-o-transition: 0.6s ease-out;
transition: 0.6s ease-out;
font-size:20px;
line-height:1.7;
margin-top:5px;
 
}




.TextIntroError{
   /* border-bottom: 3px solid #46c3bc;*/
    opacity: 1;
    -webkit-transition: 0.6s ease-out;
-moz-transition: 0.6s ease-out;
-o-transition: 0.6s ease-out;
transition: 0.6s ease-out;
font-size:20px;
line-height:1.7;
}

.TextIntro1 ul{
display:flex;
flex-flow: row wrap;
}

.TextIntroError ul{
display:flex;
flex-flow: row wrap;
}

.TextIntro1 ul li{
width:calc(100% / 4); 
aspect-ratio: 1 / 1;
}












.langue1{

    font-size:19px;
color:black;  
animation:mymove3 0.65s;
-webkit-animation:mymove3 0.65s;
}



.langue1 a{
display;flex;
color:black;
-webkit-transition: 0.6s ease-out;
-moz-transition: 0.6s ease-out;
-o-transition: 0.6s ease-out;
transition: 0.6s ease-out;
/*border: 2px solid #46c3bc;
opacity:0.8;*/
padding: 0px;
opacity:0.4;
}




.langue1 a#FR1{
border-bottom: 1px solid black; 
/*border-bottom: 1px solid #46c3bc;*/
opacity:1;
}

.langue1 a#EN1{
border-bottom: 1px solid black; 
opacity:1;
}

.langue1 a:hover{
/*color:#4D87E2;*/
border-bottom: 1px solid black !important;
opacity:1;
}


.langue1 a#FR1 {
    border-bottom: 1px solid black;
    opacity: 1;
	
}

.langue1 a#EN1 {
    border-bottom: 1px solid black;
    opacity: 1;
}



.copyrightA{
    margin-top: -33px;
	margin-left: 40px;
	font-size:12px;
	
}

#footer {
position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;  
}

@media (prefers-color-scheme: dark) {

.langue1{

    font-size:19px;
color:white;  
animation:mymove3 0.65s;
-webkit-animation:mymove3 0.65s;
}
    
.langue1 a{
display;flex;
color:white;
-webkit-transition: 0.6s ease-out;
-moz-transition: 0.6s ease-out;
-o-transition: 0.6s ease-out;
transition: 0.6s ease-out;
/*border: 2px solid #46c3bc;
opacity:0.8;*/
padding:4px;
opacity:0.4;
}
    
    
.langue1 a#FR1{
border-bottom: 1px solid black; 
/*border-bottom: 1px solid #46c3bc;*/
opacity:1;
}

.langue1 a#EN1{
border-bottom: 1px solid black; 
opacity:1;
}

.langue1 a:hover{
/*color:#4D87E2;*/
border-bottom: 1px solid white !important;
opacity:1;
}
    

.copyrightA{
color:white; 
	
}
}

.worklistli{

/*margin-top: 10px;
margin-bottom: 10px;
background-color:aliceblue;
  -webkit-transition: 0.5s ease-out;
  -moz-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
  transition: 0.5s ease-out;*/
}

.worklistli{
display:flex;
    flex-flow: row;
justify-content:center;
align-items: center;
 height: 100%;
    width: 100%;
}

/*.worklistli a{
display:flex;
    flex-flow: row wrap;
justify-content:center;
align-items: center;
background-color:white;
padding:15px;
}*/

.titlework a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    line-height: 1.2;
    color: #1553f0;
    opacity: 1;
    background-color: #ebfdff;
	    background-color: white;
	    border-style: solid;
    border-left-width: 1px;
    border-bottom-width: 1px;
	border-color:#3366BB;
}
    
    
@media (prefers-color-scheme: dark) {    
.titlework a {
    background-color: #1c1c1c;
}
}


.titlework li:nth-child(4n) {
    border-right: solid;
    border-right-width: 1px;

border-color:#3366BB;
}

.titlework li:nth-child(-n+4) {
    border-style: solid;
    border-top-width: 1px;
	border-color:#3366BB;
}

.titlework a{
-webkit-transition: 0.6s ease-out;
-moz-transition: 0.6s ease-out;
-o-transition: 0.6s ease-out;
transition: 0.6s ease-out;
}


.titlework a p {
    border-top: 1px solid #1553f0;
    border-bottom: 1px solid #1553f0;

    padding: 10px;
   /* -webkit-transform: rotate(-22.5deg);
    -moz-transform: rotate(-22.5deg);
    -ms-transform: rotate(-22.5deg);
    -o-transform: rotate(-22.5deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);*/
}

.titlework a:hover{
opacity:0;
  -webkit-transition: 0.5s ease-out;
  -moz-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
  transition: 0.5s ease-out;
    background-color: none;

}

/*.worklistli:hover{

padding-top: 18px;
padding-bottom: 18px;
background-color:aliceblue;
}*/



.titlework li#workconf{
    content: "";
background-image:url("../img/bg/conf.jpg");
background-size: cover;

}

.titlework li:hover{
      -webkit-transition: 0s ease-out;
  -moz-transition: 0s ease-out;
  -o-transition: 0s ease-out;
  transition: 0s ease-out;
    border-bottom: 1px solid #1553f0;
    border-left: 1px solid #1553f0;

}



.titlework li#workmentoring{
    content: "";
background-image:url("../img/bg/mentoring.jpg");
background-size: cover;
}

.titlework li#workentrep{
    content: "";
background-image:url("../img/bg/dev.jpg");
background-size: cover;
}



.titlework li#spectaclepodcast{
    content: "";
background-image:url("../img/bg/logoPodcastETWVB.jpg");
background-size: cover;
}

@media (prefers-color-scheme: dark) {
.titlework li#spectaclepodcast{
    content: "";
background-image:url("../img/bg/logoPodcastETWVB-copie2.png");
background-size: cover;
}
}





@media (prefers-color-scheme: dark) {
.titlework li#workentrep{
    content: "";
background-image:url("../img/bg/devdark.jpg");
background-size: cover;
}
}

.titlework li#workjournalismem{
    content: "";
background-image:url("../img/bg/journalismemusicale.jpg");
background-size: cover;
}

@media (prefers-color-scheme: dark) {
.titlework li#workjournalismem{
    content: "";
background-image:url("../img/bg/journalismemusicaleDark.jpg");
background-size: cover;
}

}

.titlework li#workmtvpress{
    content: "";
background-image:url("../img/bg/tvpresse.jpg");
background-size: cover;
}

.titlework li#workexpo{
    content: "";
background-image:url("../img/bg/expo.jpg");
background-size: cover;
}

.titlework li#worklivres{
    content: "";
background-image:url("../img/bg/livres.jpg");
background-size: cover;
}

.titlework li#workbonneannee{
    content: "";
background-image:url("../img/bg/bonneanne.jpg");
background-size: cover;
}

.titlework li#workmexperimentation{
    content: "";
background-image:url("../img/bg/IMG_8839.jpg");
background-size: cover;
}

@media (prefers-color-scheme: dark) {
.titlework li#workmexperimentation{
    content: "";
background-image:url("../img/bg/IMG_8842.jpg");
background-size: cover;
}
}



.titlework li#workillustration{
    content: "";
background-image:url("../img/bg/solarsystem.jpg");
background-size: cover;
}

.titlework li#workfilm{
    content: "";
background-image:url("../img/bg/films.jpg");
background-size: cover;
}

.titlework li#worksculpture{
    content: "";
background-image:url("../img/bg/sculpture.jpg");
background-size: cover;
}





/*___________________________________________________________*/ 









.select {
    text-decoration: none;
    font-family: 'Montserrat',"hind", Helvetica, sans-serif, arial;
    cursor: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: auto;
}

.select ul {
    text-decoration: none;
    /*margin-top: 20px;*/
    margin-bottom: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: ;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    /**/ justify-content: center; 
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    width: auto; 
}

.select li {
    display: inline-block;
    text-decoration: none;
    font-family: "hind", futura, helvetica;
    /**/margin-right: 15px;
    margin-left: 15px;
}

.select a {
    display: inline-block;
    text-decoration: none;
    font-family: "hind", futura, helvetica;
    transition-duration: 1s;
    font-size: 20px;
    color: blue;
}


.bordermenu{
    font-family: "hind", futura, helvetica;
    color: black;
    font-size: 20px;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border: 2px solid #0000DD;
    padding: 15px; 

}

.bordermenu a {
    display: inline-block;
    text-decoration: none;
    font-family: 'Montserrat',"hind", Helvetica, sans-serif, arial;
    transition-duration: 1s;
    font-size: 20px;
    color: ;
}



.bordermenu1:hover
{
opacity:1;  
color: blue !important;
}


.bordermenu1:hover a
{
opacity:1; 
color: blue !important;
}

.bordermenu:hover
{
border: 2px solid #0000CC;
border-radius: 8px; 
-moz-border-radius: 8px; 
-webkit-border-radius: 8px; 
background-color:#3535fa;
color: white !important;
}

.bordermenu:hover a
{
color: white !important;
}


.opac1A, .opac1B{
opacity:0.3;  
}















/* .twitter-widget-0{
width:100%;
}

.twitter-tweet-rendered{
width:100%;    
}

.twitter-tweet-rendered iframe{
width:100%;    
}

.entry-content .twitter-tweet-rendered {
    max-width: 100% !important;
}


.entry-content .twitter-tweet-rendered {
max-width: 100% !important;
}

iframe[id^='twitter-widget-']{ width:100% !important;} */








html.myhtml, body.mywork{
    background-color:white;
    height:100%;
    width:100%;

	line-height: 1;
	font-family:"hind", futura,  helvetica;
}




html.myhtml1, body.mywork1{
    background-color:#fbfbfb;
    height:100%;
    width:100%;

	line-height: 1;
	font-family:"hind", futura,  helvetica;
}


@media (prefers-color-scheme: dark) {
    
html.myhtml, body.mywork{
    background-color:#1c1c1c;
    height:100%;
    width:100%;

	line-height: 1;
	font-family:"hind", futura,  helvetica;
}    
    
html.myhtml1, body.mywork1{
    background-color:#1c1c1c;
    height:100%;
    width:100%;

	line-height: 1;
	font-family:"hind", futura,  helvetica;
}
    }


.logo2{
/* */position:absolute;
display:flex;
flex-flow:row;
justify-content: center;
width:calc(100%);
margin-top: 11px;
}

.logo2a, .logo3a{
/* */position:absolute;
display:flex;
flex-flow:row;
justify-content: center;
width:calc(100%);
margin-top: 11px;
}

.logo2a a, .logo3a a{
width:calc(100%-30px);

z-index:1;
}

.logo2erreur{
/* */position:absolute;
display:flex;
flex-flow:row;
justify-content: center;
width:78px;
    margin-top: -8px;	
}

.logo2 a{
width:calc(100%-30px);

z-index:1;
}

.logo2 img:hover, .logo2a img:hover {
text-decoration:none; -webkit-filter: invert(100%); filter: invert(100%);
}

.logo3a img:hover {
text-decoration:none; -webkit-filter: brightness(1.3); filter: brightness(1.3);
}

.logo2 img, .logo2a img, .logo3a img{
text-decoration:none;
color:#312929;
font-weight:500;
  -webkit-transition: 0.5s ease-out;
  -moz-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
  transition: 0.5s ease-out;
}

.logo3 img, .logo3a img {
    margin-top: -11px;
}

.mycontent{
font-family:"hind", futura,  helvetica;
width:100%;
}

.mycontent ul{
display:flex;
flex-flow: row;
font-family:"hind", futura,  helvetica;
width:100%;
}

.mycontent ul li{
width:100%;
}

.mycontent ul li img{
border: 1px solid black;
border-radius: 2px;
}

.navarrow{
position:relative;
z-index:0;

}

.myarrowproject{
display:flex;
flex-flow: row;
z-index:0;
justify-content:space-between;
padding-left:40px;
padding-right:40px;
align-items: center;
    height: 55px;
}

.myarrowprojectli{
}

.myarrowproject a{
display:flex;
flex-flow: row;
align-items:flex-end;

}

.myarrowproject p{
margin-left:20px;
margin-right:20px;
}

@media (prefers-color-scheme: dark) {
.myarrowproject p{
margin-left:20px;
margin-right:20px;
color:white;
}
}

.rectangle{
  padding-top: 55px;
  padding-bottom: 40px;
  padding-left:40px;
  padding-right:40px;
 height: 100%;
}

.rectangle1{
  padding-top: 55px;
  padding-bottom: 55px;
  padding-left:40px;
  padding-right:40px;
 height: 100%;
}

.e401{
background-image: url("../erreur/images/401.png");
background-size: cover;
}

.e402{
background-image: url("../erreur/images/402.png");
background-size: cover;
}

.e403{
background-image: url("../erreur/images/403.jpg");
background-size: cover;
}

.e408{
background-image: url("../erreur/images/408.gif");
background-size: cover;
}

.e504{
background-image: url("../erreur/images/504.gif");
background-size: cover;
}

.e508{
background-image: url("../erreur/images/508.gif");
background-size: cover;
}

.ebgcolor{
padding:20px;
background-color: white;
background-size: cover;
}

.mycorner {
   border-radius: 1px;
  border: 1px solid black;
  background: white; 
  height: 100%;
  width:100%;
line-height:1.5;
 overflow: auto;
	    background-size: cover;
	
 /*background-color:azure;*/
}


@media (prefers-color-scheme: dark) {
 
.mycorner {
   border-radius: 1px;
  border: 1px solid white;
  background: #1c1c1c; 
  height: 100%;
  width:100%;
line-height:1.5;
 overflow: auto;
	    background-size: cover;
	
 /*background-color:azure;*/
}
    
}

.mywork .mycorner H1{
font-size:23px;
border-style: solid;
border-color: black;
border-bottom-width: 2px;
border-bottom-color;
border-bottom-style;
width: fit-content;
width: -moz-max-content; 
width: -moz-fit-content; 
}

.mycorner H2{
font-size:20px;
border-style: solid;
border-width;
border-color: grey;
border-bottom-width: 1px;
border-bottom-color;
border-bottom-style;
width: fit-content;
width: -moz-max-content; 
width: -moz-fit-content; 
margin-bottom: 17px;
}




.content {
  /* Subtract the header size 
 background-color:beige;*/
	  margin:40px;
}

.MyTextA1{
line-height:1.8;
}


@media (prefers-color-scheme: dark) {
.content H1, .content H2, .content p, .content figcaption{
color:#bab3b3;
}
    }

.content1 {
  /* Subtract the header size 
 background-color:beige;*/
	  margin:20px;
}


.myimgleft{
    float: left;
    margin: 10px 10px 10px 0;
border-style: solid;
border-width: 2px;
border-color: grey;
}




.myimg, .myimgpicto{

    /*margin: 10px 10px 10px 10px;*/
  display: block;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: 0.5s ease-out;
  -moz-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
  transition: 0.5s ease-out;
}


.myimgpicto:hover {
text-decoration:none; -webkit-filter: invert(100%); filter: invert(100%);
}




@media (prefers-color-scheme: dark) {
.myimg, .myimgpicto{
text-decoration:none; 
    -webkit-filter: invert(0%); filter: invert(0%);
    /*margin: 10px 10px 10px 10px;*/
  display: block;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: 0.5s ease-out;
  -moz-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
  transition: 0.5s ease-out;
}


.myimgpicto:hover {
text-decoration:none; -webkit-filter: invert(0%); filter: invert(0%);
}

}






.myfig1{
width: 100%;
    font-size: 20px;
    font-family: Helvetica;
    display: flex;
    flex-flow: row wrap;

}


.imgandcap{
   width:calc(100%); 
	padding:20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.imgandcapA{
   width:calc(100%); 
	padding:20px;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.imgandcapA img{
margin-bottom:10px;
}


.imgandcap0{
   width:calc(100% / 2); 
	padding:20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
}

.imgandcap1{
   width:calc(100% / 3); 
	padding:20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
}

.imgandcap2{
   width:calc(100% / 4); 
	padding:20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
	align-content: flex-start;
    text-align: center;
}




.myimgN3{
    max-width: 100%;
    max-height: 100%;

}


figcaption{
    font-family: 'garamond', Georgia, sans-serif, arial ;
	font-size:16px;
}


.aaaaaaa{
    margin-bottom: 25px;
    font-size:20px;
color:#46c3bc;  
animation:mymove3 0.65s;
-webkit-animation:mymove3 0.65s;
    
}


.content p.ringo1{
margin-top:9px;
}


.content p.cv1{
line-height:1.94;
}


.VB1{

font-weight: 600;

 
}

.content p.cv1 span{
font-weight: 300;
        font-family: "hind", Helvetica, sans-serif, arial;
 
}



.figv{
	display:flex;
	flex-flow: row;
	justify-content:center;
	width:100%;
	}






.titlework li{


   -webkit-animation: fadein 2.2s, mymove 0.6s; /* Safari and Chrome */
       -moz-animation: fadein 2.2s, mymove 0.6s; /* Firefox */
        -ms-animation: fadein 2.2s, mymove 0.6s; /* Internet Explorer */
         -o-animation: fadein 2.2s, mymove 0.6s; /* Opera */
            animation: fadein 2.2s, mymove 0.6s;
}

.titlework2 li, .emailvb, #marge{
   -webkit-animation: fadein 2.2s; /* Safari and Chrome */
       -moz-animation: fadein 2.2s; /* Firefox */
        -ms-animation: fadein 2.2s; /* Internet Explorer */
         -o-animation: fadein 2.2s; /* Opera */
            animation: fadein 2.2s;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes mymove
{
0%   {top:1000px;}
100% {top:0px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:1000px;}
100% {top:0px;}
}

@-moz-keyframes mymove
{
0%   {top:1000px;}
100% {top:0px;}
}






@keyframes mymove1{
0%   {left:-200px;}
100% {left:0px;}
}

@-webkit-keyframes mymove1 /* Safari and Chrome */{
0%   {left:-200px;}
100% {left:0px;}
}

#bottomenu{
animation:mymove3 0.65s;
-webkit-animation:mymove1 0.65s; /* Safari and Chrome */
}

@keyframes mymove3{
0%   {bottom:-200px;}
100% {bottom:0px;}
}

@-webkit-keyframes mymove3 /* Safari and Chrome */{
0%   {bottom:-200px;}
100% {bottom:0px;}
}










#next, .vbvb1{
position:relative;
animation:mymove3 0.65s;
-webkit-animation:mymove3 0.65s; /* Safari and Chrome */
}

.title1 H1{
position:relative;
line-height:1.5;
animation:mymove2 0.65s;
-webkit-animation:mymove2 0.65s; /* Safari and Chrome */
color:#1a0808;
}

#bottomenu{
animation:mymove3 0.65s;
-webkit-animation:mymove1 0.65s; /* Safari and Chrome */
}

#anim1{
animation:mymove1 0.65s;
-webkit-animation:mymove1 0.65s; /* Safari and Chrome */
}




.textebar{
text-decoration:line-through;	
}





















/* 
-----------------------------------------------------------------------------
Transition
----------------------------------------------------------------------------- 
*/


.m-scene .scene-main {
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;


}
.m-scene .scene-main--fadein {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}


@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
	background-color:black;  
  }
	20%{
		background-color:white;
	}	
  100% {
    opacity: 1;
  
  }
}

@media (prefers-color-scheme: dark) {
    
 .m-scene .scene-main {
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;


}
.m-scene .scene-main--fadein {
  -webkit-animation-name: fadeInA;
          animation-name: fadeInA;
}


@-webkit-keyframes fadeInA {
  0% {
    opacity: 0;
	background-color:white;  
  }
	20%{
		background-color:black;
	}	
  100% {
    opacity: 1;
  
  }
}   
}



@keyframes fadeIn {
  0% {

    opacity: 0;
	background-color:black;  
	    border-radius: 10px;
 /*transform: scale(0.2);*/
	  transform-origin: center;
  border: 1px solid black;
  background: white; 

line-height:1.4;
 overflow: auto;
  }
	20%{
		background-color:white;
		/*transform: scale(0.5);*/
	}	
  100% {

    opacity: 1;
	     border-radius: 1px;
  border: 1px solid black;
  
  background: white; 

line-height:1.4;
 overflow: auto;

  }
}

.rectangle1{
  -webkit-animation-name: fade1;
          animation-name: fade1;	
	
}

@keyframes fade1 {
  0% {
    opacity: 0;
	background-color:black;  
  }
	20%{
		background-color:white;
	}	
  100% {
    opacity: 1;

  }
}































/* 
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
Transition
----------------------------------------------------------------------------- 
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
*/


.cornertop {
  -webkit-animation-duration: 0.9s;
          animation-duration: 0.9s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInTop;
          animation-name: fadeInTop;
	margin-right:-1000px;
}

.cornerleft {
  -webkit-animation-duration: 0.9s;
          animation-duration: 0.9s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
	margin-right:-1000px;
}

.cornerright {
  -webkit-animation-duration: 0.9s;
          animation-duration: 0.9s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInRight;
          animation-name: fadeInRight;
	margin-right:-1000px;
}

.cornerbottom1{
  -webkit-animation-duration: 0.25s;
          animation-duration: 0.25s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInBottom1;
          animation-name: fadeInBottom1;
}

.cornerright1 {
  -webkit-animation-duration: 0.25s;
          animation-duration: 0.25s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInRight1;
          animation-name: fadeInRight1;
}

.cornerleft1{
  -webkit-animation-duration: 0.25s;
          animation-duration: 0.25s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: fadeInLeft1;
          animation-name: fadeInLeft1;
}





@-webkit-keyframes fadeInTop {
  0% {
    opacity: 0;
	  margin-top:1000px;
	  transform: scale(0.9);
  }
  100% {
    opacity: 1;
	  margin-top:0px;
	  transform: scale(1);
  }
}
@keyframes fadeInTop {
  0% {
    opacity: 0;
	  margin-top:1000px;
	  transform: scale(0.9);
  }
  100% {
    opacity: 1;
	  margin-top:0px;
	  transform: scale(1);
  }
}


@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
	  margin-left:800px;
  }
  100% {
    opacity: 1;
	  margin-left:0px;
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
	  margin-left:800px;
  }
  100% {
    opacity: 1;
	  margin-left:0px;
  }
}


@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
	 left:-2000px;
  }
  100% {
    opacity: 1;
	  margin-left:0px;
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
	  margin-left:2000px;
  }
  100% {
    opacity: 1;
	  margin-left:0px;
  }
}


@keyframes fadeInBottom1 {
  0% {
    opacity: 1;
	  margin-top:0px;
  }
  100% {
    opacity: 0;
	  margin-top:-1300px;
  }
}

@-webkit-keyframes fadeInBottom1  {
  0% {
    opacity: 1;
	  margin-top:0px;
  }
  100% {
    opacity: 0;
	  margin-top:-1300px;
  }
}


@keyframes fadeInLeft1 {
  0% {
    opacity: 1;
	  margin-left:0px;
  }
  100% {
    opacity: 0;
	  margin-left:2500px;
  }
}

@-webkit-keyframes fadeInLeft1 {
  0% {
    opacity: 1;
	  margin-left:0px;
  }
  100% {
    opacity: 0;
	  margin-left:2500px;
  }
}


@keyframes fadeInRight1 {
  0% {
    opacity: 1;
	  margin-left:0px;
  }
  100% {
    opacity: 0;
	  margin-left:-2000px;
  }
}

@-webkit-keyframes fadeInRight1 {
  0% {
    opacity: 1;
	  margin-left:0px;
  }
  100% {
    opacity: 0;
	  margin-left:-2000px;
  }
}




.animatemycorner{
  -webkit-animation-duration: 0.9s;
          animation-duration: 0.9s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;	
  -webkit-animation-name: animatemycornernext1;
          animation-name: animatemycornernext1;
}


@keyframes animatemycornernext1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }

}














/* 

___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
CONTACT 
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________

*/



form[name=contactform]{
    width: 100%;
    height: 100%;
	display:flex;
	flex-flow:row;
	justify-content: center;
}

#marge{
	padding-top:20px;
    width: 100%;
    height:70%;
	display:flex;
	flex-flow:row;
	justify-content: center;	
}

.mycontact .mycorner H1 {
    font-size: 23px;
    border-style: solid;
    border-color: black;
    border-bottom-width: 2px;
    border-bottom-color: ;
    border-bottom-style: ;
    width: fit-content;
    width: -moz-max-content; 
    width: -moz-fit-content; 
}


#sendemail1 {

    font-family: "hind", Futura, Helvetica, Arial, 'p22_johnston_undergroundRg';
    display: flex;
    flex-flow: column;
    justify-content: center;
	    width: 100%;

}

#sendemail1 img{
height:30%;
width:30%;
}

#sendemail1 a, #sendemail1 p{
font-family: "hind", Futura, Helvetica, Arial, 'p22_johnston_undergroundRg';
}


.emailvb{

}

.emailvb1{
margin-top:30px;
margin-bottom: 10px;
font-size: 0.3em;
/*color: #309cd3;*/
}

#marge textarea {
	display:flex;
	flex-flow: row nowrap;
	justify-content: center;
    height: 50%;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    resize: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 9px;
    font-size: 14px;
    font-family: 'roboto', Verdana, sans-serif;
    border: 1px solid #5f5f5f;
    margin-left 0px; 
    margin-right: 0px; 
}

#sign-up input[type="submit"] {
  margin-bottom: 10px;
  margin-right: 10px;
  padding: 8px 15px;
  font: bold 18px Futura, Helvetica, Verdana, sans-serif;
  line-height: 1;
  border: none;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}
#sign-up input[type="submit"]:hover {
  -webkit-box-shadow: -2px 2px 4px rgba(25, 12, 5, .5);
  -moz-box-shadow: -2px 2px 4px rgba(25, 12, 5, .5);
  box-shadow: -1px 2px 9px rgba(25, 12, 5, .5);
}

#sign-up fieldset { 
width: 80%;
height:100%;
/*margin: 10px 0 10px 10px;*/ 

}


#sign-up label {
  display: inline-block;
  font: bold 14px Futura, Verdana, sans-serif;
  line-height: 1.5em;
  /*color: #309cd3;*/
}

#sign-up fieldset input[type="text"], #sign-up fieldset input[type="email"] #sign-up fieldset input[type="message"] {
    width:250px;
    padding: 8px 8px;
    margin-bottom: 16px;
    font-size: 12px;
    color: #89897e;
    border: 1px solid #5f5f5f;
    background: #fafafa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}



label {
padding-top:10px;
padding-bottom:5px;
}

#message{
padding-bottom:5px;
}





.size1{
padding-left:80px;
}

.textepres{
line-height:1.3;
}

#Keyboard{
  padding-bottom:20px;
}

.message {
background:#181818;
color:#FFF;
position: absolute;
top: -250px;
left: 0;
margin-left:188px;
width: 100%;
height: 250px;
padding: 20px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;

}


#toggle {
  position:absolute;
  appearance:none;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#toggle + label {

position: absolute;
  cursor:pointer;
  padding:10px;
  background: #26ae90;
width: 100px;
border-radius: 3px;
padding: 8px 10px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
  margin:20px 50px;
  transition:all 500ms ease;
}
#toggle + label:after {

  content:"Content" 


}

.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:30px;
  
}

#toggle:checked ~ .message {
  top: 0;
}

#toggle:checked ~ .container {
  margin-top: 250px;
}

#toggle:checked + label {
  background:#dd6149;
}

#toggle:checked + label:after {
  content:"Close"

    padding-top:400px;
}



#button1{
background-color:#88888 !important;
margin-top:-11px;  
position: fixed;
z-index: 1000;
width: -webkit-calc(100% - 122px);
width: -moz-calc(100% - 122px);
width: calc(100% - 122px);

}
















































/* 
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
MEDIAQUERIES 
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
*/ 






































@media screen and (max-width:1200px) {
    
.TextIntro1 {
    font-size: 20px;
}
    
.imgandcap2 {
    width: calc(100% / 2);
    padding: 20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
}
	
	.tvpressvideo1{
	height:400px;	
	}	
	
.TextIntro1 ul li {
    width: calc(100% / 3);
}
	
.titlework li:nth-child(4n) {
    border-right-width: 0px;
	
}
	
.titlework li:nth-child(3n){
    border-right: solid;
    border-right-width: 1px;
	border-color:#3366BB;

}
	
.titlework li:nth-child(-n+4) {
 border-top-width: 0px;

}
	
.titlework li:nth-child(-n+3) {
    border-style: solid;
    border-top-width: 1px;
	border-color:yellowgreen;
	border-color:#3366BB;
}

	#galeriesmagazineN63{
	width:60%;
	}	
	
}


@media screen and (max-width:1024px) {

.bordermenu1{
line-height:2;    
}


}

@media screen and (max-width:1000px) {
.imgandcap1 {
    width: calc(100% / 2);
    padding: 20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
}
	
	.tvpressvideo1{
	height:300px;	
	}	
}

@media screen and (max-width:980px) {

	.donotshow1{
	display:none;
	}	
	
	.img40A{
    width:100%; 		
	}
	
	#galeriesmagazineN63{
	width:75%;
	}	
	


	
}

@media screen and (max-width:900px) {

.titlework li:nth-child(2n){
    border-right: solid;
    border-right-width: 1px;
	border-color:#3366BB;

}
	
.titlework li:nth-child(3), .titlework li:nth-child(9){
    border-right-width: 0px;
}	
	
.titlework li:nth-child(-n+4), .titlework li:nth-child(-n+3) {
 border-top-width: 0px;

}
	
.titlework li:nth-child(-n+2) {
    border-style: solid;
    border-top-width: 1px;
	border-color:#3366BB;
}
	
	.donotshow1{
	display:none;
	}	
	
.imgandcap1, .imgandcap2,  {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
}
	
	
.imgandcap2PJ {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
}
	
.imgandcap1 img, .imgandcap2 img,  .imgandcap2PJ img{
    width: 100%;
    padding: 0px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}
	
	.tvpressvideo1{
	height:270px;	
	}	
	
.TextIntro1 ul li {
    width: calc(100% / 2);
}
	
	#galeriesmagazineN63{
	width:80%;
	}	
	
	.tvpressvideo1{
	width:90%;
	}	
	
}

@media screen and (max-width:810px) {
    
    #abehance, #alin{
	display:none;	
	}
    
    
	.vimeo1{
		width:500px;
	}
	
	#abehance{
	display:none;
	}
	
	#galeriesmagazineN63{
	width:90%;
	}	
}

@media screen and (max-width:770px) {

	
	
	.myarrowproject a p{
	font-size:14px;
	margin-bottom: 3px;
	}	
	
	.imgandcap0{
   width:100%; 
	padding:20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
}
	
.TextIntro1 {

    opacity: 1;
    -webkit-transition: 0.6s ease-out;
    -moz-transition: 0.6s ease-out;
    -o-transition: 0.6s ease-out;
    transition: 0.6s ease-out;
    font-size: 20px;
    line-height: 1.7;
}
	
	#galeriesmagazineN63{
	width:90%;
	}	
	
	.tvpressvideo1{
	width:95%;
	}	
	
	.mywork .mycorner H1 {
	font-size:20px;
	}	

}

@media screen and (max-width:670px) {

.myvid1{
	display:none;
	}	

	.vimeo1{
		width:430px;
	}
	
	.tvpressvideo1{
	height:230px;	
	}	
	
.TextIntro1 {
    /* border-bottom: 3px solid #46c3bc; */
    opacity: 1;
    -webkit-transition: 0.6s ease-out;
    -moz-transition: 0.6s ease-out;
    -o-transition: 0.6s ease-out;
    transition: 0.6s ease-out;
    font-size: 18px;
    line-height: 1.7;
}
	
	#ainsta{
	display:none;
	}
	
	#galeriesmagazineN63{
	width:100%;
	}	
	
.mycorner H2 {
    font-size: 17px;

}

}

@media screen and (max-width:610px) {


	.myarrowproject a p{
	display:none;
	}	

	.vimeo1{
		width:380px;
	}
	
	#galeriesmagazineN63{
	width:100%;
	}	
	
	.mywork .mycorner H1 {
	font-size:18px;
	}	
	
	.fignone{
	display:none;
	}	
	

}

@media screen and (max-width:550px) {
	
	.fignone{
	display:none;
	}	
	
.navmenu ul {
    text-decoration: none;
    margin-top: 19px;
    margin-bottom: 24px;
    background-color: ;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    /* justify-content: center; */
    margin-left: 10px;
    margin-right: 6px;
}

.rectangle, .rectangle1 {
    padding-top: 55px;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
    height: 100%;
}	
	
	
.content{
	padding-top:20px;
	margin: 15px;	
	}	

.content1 {
    margin: 10px;
}
	
.imgandcap0 {
    padding: 0px;
	margin-bottom:20px;
}	
	
.imgandcap1{
    padding: 0px;
	margin-bottom:20px;
}	
	
.imgandcap2 {
    padding: 0px;
	margin-bottom:20px;
}	
	
	
.imgandcap2PJ {
    padding: 0px;
	margin-bottom:20px;
}	
	
	
.imgandcapA {
    padding: 0px;
	margin-bottom:20px;
}
	

	
	
.titlework li:nth-child(4n), .titlework li:nth-child(3n), .titlework li:nth-child(2n) {
    border-top-width: 0px;
}	
	

.titlework li:nth-child(1n) {
    border-right: solid;
    border-right-width: 1px;
	border-color:#3366BB;
}
	

.navmenu1 ul {
	z-index:2;
	}
	
.navmenu1 ul {
    text-decoration: none;
    background-color: ;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
	    margin-right: 10px;
	}

	.vimeo1{
		width:320px;
	}
	
	#abehance, #atwitter, #ainsta, #alin{
	display:none;	
	}
	
	/*.menumynav1 li img{
	margin-top: 10px;
	}
	
	.menumynav2 p{
	    margin-top: -4px;
	}*/
	
	.langue1 {
    margin-bottom: 25px;
    font-size: 19px;
    color: black;
    animation: mymove3 0.65s;
    -webkit-animation: mymove3 0.65s;

}
	
	
.TextIntro1 ul li {
    width: calc(100%);
}	

	
.TextIntro1 {

    opacity: 1;
    -webkit-transition: 0.6s ease-out;
    -moz-transition: 0.6s ease-out;
    -o-transition: 0.6s ease-out;
    transition: 0.6s ease-out;
    font-size: 16px;
    line-height: 1.7;
}	
	
	
	#galeriesmagazineN63{
	width:100%;
	}		
	
.mycorner p {
    font-size: 15px;
	}
	
	/**/	.content p{
   font-size: 14px;		
	}
	
	.mywork .mycorner H1 {
	font-size:16px;
	}		
}






@media screen and (max-width:400px) {
	.menumynav2 p{
	    margin-top: 37px;
	}
	
	#atwitter, #aline{
	display:none;
	}
	
.mycorner H2 {
    font-size: 16px;
	}
	
.mycorner p {
    font-size: 15px;
	}
	
	/**/	.content p{
   font-size: 14px;		
	}
	
	.tvpressvideo1{
	width:100%;
	}	
	
	

	
}


@media (prefers-color-scheme: dark) {

.TextIntro1{
   /* border-bottom: 3px solid #46c3bc;*/
    opacity: 1;
    -webkit-transition: 0.6s ease-out;
-moz-transition: 0.6s ease-out;
-o-transition: 0.6s ease-out;
transition: 0.6s ease-out;
font-size:20px;
line-height:1.7;
margin-top:5px;
    color:#bab3b3;
}
)