/**
 * main.css
 *
 * 1. General HTML tags
 * 2. Masthead area
 * 3. Main content and sidebar
 * 4. Footer
 * 5. Media queries for responsive layout
 * 6. Accessibility helpers
 *
 */

/*********************************************************************
 * 1. General HTML tags
 *
 */

 @font-face {
     font-family: 'spectacle';
     src: url('fonts/spectacle/Spectacle-ExtraLight.woff2') format('woff2'),
          url('fonts/spectacle/Spectacle-ExtraLight.woff') format('woff'),
          url('fonts/spectacle/Spectacle-ExtraLight.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }

 @font-face {
     font-family: 'Mayenne Sans';
     src:    url('fonts/mayenne/Mayenne_Sans-Medium_web.eot');
     src:    url('fonts/mayenne/Mayenne_Sans-Medium_web.eot?#iefix') format('embedded-opentype'),
             url('fonts/mayenne/Mayenne_Sans-Medium_web.woff') format('woff'),
             url('fonts/mayenne/Mayenne_Sans-Medium_web.woff2') format('woff2'),
             url('fonts/mayenne/Mayenne_Sans-Medium_web.ttf') format('truetype'),
             url('fonts/mayenne/Mayenne_Sans-Medium_web.svg#svgFontName') format('svg');
     font-weight: normal;
     font-style: normal;
 }

 @font-face {
     font-family: 'Jaune Midi Bold';
     src:    url('fonts/jaune/NaNJaune-MidiBold.woff') format('woff'),
             url('fonts/jaune/NaNJaune-MidiBold.woff2') format('woff2');
     font-weight: normal;
     font-style: normal;
 }

 @font-face {
     font-family: 'Jaune Mini Black';
     src:    url('fonts/jaune/NaNJaune-MiniBlack.woff') format('woff'),
             url('fonts/jaune/NaNJaune-MiniBlack.woff2') format('woff2');
     font-weight: normal;
     font-style: normal;
 }






* {
	box-sizing: border-box;
}

body {
	padding: 2vh 4% 2% 4%;
	/* max-width: 1600px; */
	margin: 0 auto;
  background-color: #f3fdee ; /* fffef2 #f6f8f5 #ffedda #e6ffda */
  box-sizing: border-box;
}

body, td, input[type=text], textarea {
	font-family: 'spectacle', serif;
	font-size: 120%;
	line-height: 1.8em;
	/* color: #444; */
  color: black;
}

img {
	max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  /* color: #444; */
  font-weight: normal;
}

/* .home h1, .about h1{
  font-family: "MKNM";
} */

h1 {
  font-family: ;
  font-weight: normal;

}

h2 {
	font-weight: normal;
  text-transform: uppercase;
  font-size: 2.5em;
  line-height: 0.9em;
  font-family: 'Jaune Midi Bold', sans;
  font-weight: normal;
  /* font-family: "MKNM"; */
}

h3 {

}

p {
  max-width: 900px;
}

a {
	/* color: #333; */
  color: black;
	text-decoration: none;
	/* border-bottom: 1px solid #ccc; */
}
p a, li a, .inuses a{
  color: goldenrod;
}
	a:hover,
	.nav a:hover {
		color: #000;
		border-color: #aaa;
	}

blockquote {
	margin-left: 0;
	padding-left: 1.5em;
	padding-right: 2em;
	border-left: 4px solid #ddd;
	font-style: italic;
	color: #777;
}

pre, code {
	background: #eee;
	border: 1px solid #ddd;
}

pre {
	font-size: 14px;
	line-height: 1.4em;
	padding: 1em;
	border-left: 4px solid #ddd;
}

/*********************************************************************
 * 2. Masthead area
 *
 */




form.search {
	float: right;
	margin: 0;
	width: 30%;
}
	form.search input {
		margin: 0;
		padding: 0.25em 0.5em;
		border: 1px solid #ccc;
		width: 100%;
	}

.breadcrumbs {
	clear: both;
	padding-top: 1em;
}
	.breadcrumbs span:after {
		content: ">";
		color: #999;
		padding-left: 0.5em;
		padding-right: 0.25em;
	}

/*********************************************************************
 * 3. Main content and sidebar
 *
 */

#main {
	clear: both;
  width: 100%;
  margin-top: 0px;
}


.content {
	width: 100%;
	/* display: grid; */
	/* grid-template-rows : 100px 40px 1fr; */
	/* grid-template-columns: 2fr 1.5fr 1fr; */
	/* grid-column-gap: 30px; */
	/* grid-row-gap: 0px 0px 15px; */
	/* grid-template-areas: */
    /* "titre titre titre" */
    /* "menu menu menu" */
    /* "main main sidebar" */
    /* "main main ." */
    /* "legende legende ."; */
}




/* Menu */

.content .header {
  /* grid-area: titre; */
  padding-top: 20px;
  margin: 0px;
  margin-after: 0px;
  -webkit-margin-after: 0px;
  /* letter-spacing: 0.5vw; */

  display: flex;
  /* position: sticky; */
  top: 0px;
  z-index: 99;
  /* background-color: #f6f8f5; */
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
}


.icon {
  width : 80px;
  height: auto;

}

.content .header h1{
  font-size: 5em;
  line-height: 1em;
  text-align: ;
  flex: 1 1 auto;
   font-family: 'Jaune Midi Bold';
  /* align-self: flex-end; */
  /* font-family: 'MKNM'; */
  /* text-transform: uppercase; */
  margin: 0px;
  color: black;

}

.logo {
  /* display: none; */
  height: 100%;
  /* width: auto; */
  margin: 0px;
  padding: 0px;
  border: 0px;
  transition: ease 0.5s;
}

.logo:hover{
  transform: rotateX(0deg) rotateY(180deg);
}

a .logo {
  border: 0px;
}

#menu{
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 0px;
  margin: 0px;
  z-index: 1;
}
#menu > li{
  display: block;
}
#menu > li > a{
  font-size: 12px;
  line-height: 12px;
  padding: 5px 8px;
  border-radius: 15px;
  border: 1px solid black;
  background-color: #f6f8f5;
  font-family: "Jaune Mini Black";
  color: black;
}
#menu > li > a:hover{
  background-color: black;
  color: #f6f8f5;
}

.topnav, .topnav li, .menu_oeuvres {
 list-style: none;
 padding: 0;
 margin: 0;
}

.topnav {
  margin-left: 0px; /*20px*/
  width: 200px;
}

.topnav {
    /* grid-area : menu; */
 height: 100%;
 bottom: 0px;
 margin-left: 8px;
 display: flex;
 /* flex-direction: column; */
 align-items: flex-start;
 position: relative;
}


 .topnav li {
   flex: 1 1 auto;
   margin-bottom: 0px;
   transition : background 0.5s;
 }
 .topnav > li > a, .menu_oeuvres span {
   font-size: 0.7em;
   letter-spacing: 1px;
   padding: 0.25em 0.5em;
   text-decoration: none;
   display: block;
   color: #444;
   transition : color 0.5s;
   border-bottom: 0px;
   line-height: 1.1em;
}
 .topnav li:hover, .menu_oeuvres li:hover {
   font-weight: bolder;
 }
 .topnav li:hover a, .menu_oeuvres li:hover a {
   /* color: #f6f8f5; */
 }
 .topnav li.current a {
   font-weight: bold;
 }
 .topnav li.edit a {
   background: none;
 }
.languageselection{
 display: block;
 font-size: 0.8em;
}
.languageselection a {
 border-bottom: 0px;
 color: #888;
}


.pieces_button{
 cursor: pointer;
}

/* Sous-menu des Œuvres */
.menu_oeuvres{
 /* flex: 0 1 50%; */
 /* flex-wrap: wrap; */
 display: flex;
 flex-direction: column;
 /* border-top: 1px solid black; */
 color: #444;
 z-index: 90;
 overflow: hidden;
 position: absolute;
 /* width: 60%; */
 top: 20px;
 /* font-family: MKNM; */
 /* font-size: 2vw; */
 align-items: flex-start;
}

.menu_oeuvres li{
   /* flex : 1 1 100%; */
   /* margin-right: 20px; */
   box-sizing: border-box;
   /* text-transform: uppercase; */
   /* float: left; */
   /* border: 1px solid black; */
   padding: 0px;
   margin-bottom: -1px;
   text-transform: uppercase;
   /* background: rgba(256, 255,243,0.9); */
   display: block;
   box-sizing: border-box;
   padding: 0px;
   /* background-color: black; */
   border-bottom: 0px;
   position: relative;
   /* line-height: 1em; */
   text-shadow: 1px 1px 0px #f6f8f5;
}
.menu_oeuvres li .dossier{
  text-transform: none;
}
.show{
 overflow: visible;
}

.menu_oeuvres a:hover {
  font-weight: normal;
  align-self: stretch;
  background: #444;
  color: #f6f8f5;
  text-shadow: 2px 2px 0px #444;
}
.menu_oeuvres > li > a > span {
  /* padding: 15px 0px; */
}
.menu_oeuvres > li > span {
  margin-top: 15px;
  text-decoration: underline;
}

.menu_oeuvres > li > a > span:nth-child(2) {
  float: right;
  font-size: 0.8em;
}


.menu_oeuvres > a > * {
 flex : 0 1 auto;
 opacity: 0;
 z-index: 2;
}

/* .menu_oeuvres > a:nth-of-type(1) {
 background-color:  hsla(240, 100%, 50%, 1);
}
.menu_oeuvres > a:nth-of-type(2) {
 background-color:  hsla(240, 100%, 55%, 1);
}
.menu_oeuvres > a:nth-of-type(3) {
 background-color:  hsla(240, 100%, 60%, 1);
}
.menu_oeuvres > a:nth-of-type(4) {
 background-color:  hsla(240, 100%, 65%, 1);
}
.menu_oeuvres > a:nth-of-type(5) {
 background-color:  hsla(240, 100%, 70%, 1);
}
.menu_oeuvres > a:nth-of-type(6) {
 background-color:  hsla(240, 100%, 75%, 1);
} */

.menu_oeuvres h4 {
 font-size: 2em;
 color: #444;
}

.content{
  min-height: 85vh;
}

.projet .images {
  /* grid-column: 1 / span 3;
  grid-row: 3 / span 2; */
  margin-top: 200px;
  clear: both;
}

.main {
  grid-area: main;
}

.right {
  grid-area: sidebar;
  /* position: sticky;
  top: 0px; */
  height: calc(100vh - 150px);
  padding: 10px 0px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.details {
  bottom : 0px;
}

.span3 {
  grid-column : span 3;
}

.content, #sidebar {
	padding-bottom: 2em;
}

body.has-sidebar .content {

}

body.has-sidebar #sidebar {
  grid-area: sidebar;
}

.nav {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}
	.nav .nav {
		padding-left: 1.5em;
		list-style: disc;
	}
	.nav li {
		margin: 1em 0;
	}

	.nav-tree li {
		margin-top: 0;
		margin-bottom: 0;
	}

	.nav a {
		font-weight: bold;
	}

	.nav-tree li a {
		color: #777;
	}

	.nav .current > a {
		color: #333;
	}

.align_left {
	/* for images placed in rich text editor */
	float: left;
	margin: 0 1em 0.5em 0;
	position: relative;
	top: 0.5em;
	max-width: 50%;
}

.align_right {
	/* for images placed in rich text editor */
	float: right;
	margin: 0 0 0.5em 1em;
	max-width: 50%;
}

.align_center {
	/* for images placed in rich text editor */
	display: block;
	margin: 1em auto;
	position: relative;
	top: 0.5em;
}

figure {
	display: table;
	width: 1px;
	margin: 1em 0;
}

figure img {
	display: table-row;
	margin-bottom: 0.5em;
}

figure figcaption {
	display: table-row;
	font-size: smaller;
	color: #777;
	line-height: 1.4em;
}

/*---------- HOME ---------------*/

.content.home {
  /* max-height: 90vh; */
  /* overflow-y: hidden; */
}

.home p{
  font-size: 3em;
  line-height: 1.2em;
  max-width: none;
}

.home p > a{
  font-family: "Jaune Midi Bold", sans;
  font-size: 0.85em;
  color: black;
  border-bottom: 1px solid goldenrod;
  transition: 0.5s ease;
  display: inline-block;
  line-height: 1em;
}
.home p > a:hover{
  border-bottom: 1px solid black;
  transform: translateY(-5px);
}

.home img {
  /* grid-column: 1 / -1;
  grid-row: 2 / -1;
  z-index: 0; */
}

.typedetravaux{
  display: inline;
  /* padding-right: 15px; */
  border-radius: 20px;
  /* border: 1px solid black; */
  /* background: pink; */
  /* box-shadow: 0px 0px 0px 1px black; */
  /* outline: 1px solid black; */
  transition: 5s ease;
  counter-reset:li;
}
/* .typedetravaux:hover{
  background: pink;
  box-shadow: 0px 0px 40px 40px pink;
} */

.etiquetteprojet{
  position: relative;
  /* background: white; */
  display: block;
  flex : auto 0 0;
  padding: 5px;
  /* border: solid 1px black; */
  float: left;
  width: auto;
  height: 200px;
  /* margin-right: 20px; */
  margin-bottom: 35px;

  font-size: 14px;
  line-height: 1em;
  transition: 0.5s ease;
  border-bottom: 0px;
  /* overflow: hidden; */

}
.etiquetteprojet h4{
  margin: 0px 0px 5px 0px;
  font-family: 'Jaune Mini Black', serif;
  color:black;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.etiquetteprojet h4::before{
  content: counter(li);
  counter-increment:li;
  color: white;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background-color: black;
  display: inline-block;
  display: none;
  margin-right: 5px;

}
.etiquetteprojet:hover{
  transform: scale(1.4);
  z-index: 15;
  /* mix-blend-mode: multiply; */
}

.etiquetteprojet:hover h4{
  /* box-shadow: 0px 0px 5px 5px #f99;
  background-color: #f99;
  isolation: isolate; */
}

.etiquetteprojet::before, .etiquetteprojet::after{
  transition: 0.5s ease;

  /* border: 1px solid black; */
  /* box-shadow: 0px 0px 0px 1px black; */

}
.etiquetteprojet:hover::before{

  box-shadow: 0px 0px 40px 40px #f99;
  /* border: 1px solid black; */
  box-sizing: border-box;
  width: 130%;
  height: 260px;
  background: #f99;
  /* mix-blend-mode: multiply; */
}

.etiquetteprojet::before{
  content: "";
  position: absolute;
  top: -30px;
  left: -30px;
  width: 120%;
  height: 260px;
  border-radius: 28px;
  z-index: -1;
  background: transparent;
  box-shadow: 0px 0px 0px 0px transparent;
  top: -29px;
  left: -29px;
}
.etiquetteprojet::after{
  /* z-index: -10;
  border: 1px solid black;
  width: auto;
  height: 262px; */
}
.etiquetteprojet img{
  max-height: 170px;
  width: auto;
}

.tags{
  color: black;
}
.home .tags, .projetsimilaires .tags{
  position: absolute;
  bottom : -5px;
  right : 0px;
  margin-right: 10px;
}

.home .tag{
}

.projet .tags{
  max-width: 1000px;
  margin-top: 10px;
}
.projet .tag{
  float: left;
}

.tag{
  font-size: 10px;
  font-family: monospace;
  background: white;
  padding: 3px 10px;
  margin-right: 5px;
  border-radius: 5px;
  height: 20px;
  line-height: 13px;
  float: right;
}

.tag.new{
  background: #DDD;
  /* Marche pas */
  -webkit-animation:  blink 2s linear infinite;
  -moz-animation:     blink 2s linear infinite;
  -ms-animation:      blink 2s linear infinite;
  -o-animation:       blink 2s linear infinite;
  animation:          blink 2s linear infinite;
}
@-webkit-keyframes blink {
    0%{background-color:#DDD; color:black}
    50%{background-color:#000; color:white}
    100%{background-color:#DDD; color:black}
}
@-moz-keyframes blink {
    0%{background-color:#DDD; color:black}
    50%{background-color:#000; color:white}
    100%{background-color:#DDD; color:black}
}
@keyframes blink {
    0%{background-color:#DDD; color:black}
    50%{background-color:#000; color:white}
    100%{background-color::#DDD; color:black}
}
.tag.custom{background: black; color: white;}
.tag.retail{background: yellow;}
.tag.opensource{background: #8c8c8c; color: white;} /* #8c8c8c #f99 b288db */
.tag.wip{border: 2px black dotted; padding-top: 1px}

.typedetravaux span:first-of-type{
  cursor: pointer;
  line-height: 1em;
  display: inline-block;
  /* color: #333; */
}
.typedetravaux span span{
  transition: ease 0.5s;
  font-family: "Jaune Mini Black", sans;
  font-size: 0.85em;
}
.typedetravaux span:hover span:first-of-type{
  transform: rotateX(180deg);
}
.typedetravaux span > img:first-child{
  max-height: 50px;
  margin: -10px 10px 0px 10px;
  /* display: none; */
}

.listeprojets{
  display: flex;
  flex-wrap: wrap;
}




/* .home > div:nth-last-of-type(1) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  z-index: 20;
  padding : 0 20px 20px 20px;
} */

/*---------- PAGE GLOBLALE ŒUVRES ---------------*/

.oeuvres{
  grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 10px;
}

.oeuvres a {
    border-bottom: 0px;
}

.ticket_oeuvre {
  /* height: 30em; */
  /* border-top: 1px solid black; */
  /* background-color: #fffeee; */
  color: #444;
  margin-bottom: 10px;
  position: relative;
  transition: ease 0.5s;
}

.ticket_oeuvre:hover {
  transform: rotateX(20deg);
}



.ticket_oeuvre a{
    color: #444;
}

.ticket_oeuvre >div:first-child{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.ticket_oeuvre h3 {
  /* font-family: "MKNM"; */
  text-transform: uppercase;
  font-weight: normal;
  border-top: 0px;
  padding-top: 0em;
  position: absolute;
  width: 100%;
  bottom: 0px;
  left: 0px;
  margin: 0px 0px;
  padding-left: 10px;
  font-size: 0.7em;
  letter-spacing: 1px;
  /* background: rgba(256, 256,256,0.7); */
  background: rgba(256, 256,256,1);
}

.ticket_oeuvre p{
  font-size: 0.7em;
  color: #444 ;
}

.ticket_oeuvre .date {
}

.ticket_oeuvre > .images > img {
  width: 100%;
}

.filtres{
  width: 100%;
  position: fixed;
  bottom: 0px;
  padding: 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #f6f8f5;
  height : 50px;
  font-size: 0.8em;
}
.filtres > * {
  /* padding: 0px 6px; */
  /* margin : 0px 0px 0px 0px; */
  line-height: 1.5em;
  margin: 0px 10px;
  border-radius: 20px;
  background-color: #f6f8f5;
  padding: 8px;
  transition: 0.5s ease;
}

.filtres > *:first-child{
  padding-left: 0px;
  margin-left: 0px;
}

.filtres span {
  cursor: pointer;
  font-size: 0.7em;
  /* border: solid 1px #444; */
  background-color : #f6f8f5;
}

.filtres span:hover {
  background-color: #444;
  /* color : #f6f8f5; */
  transform: scale(1.2);
  background-color: white;
}

.filtres span.active{
  background-color: #444;
  color : #f6f8f5;
}

/*---------- PAGE INDIVIDUELLE PROJET ---------------*/


.projet{
  box-sizing: border-box;
}

section{
  margin-bottom: 200px;
}

section.summary {
  font-size: 3em;
  line-height: 1.2em;
  margin-top:50px;
  margin-bottom: 0px;
  max-width: 70vw;
}

.ctaGet{
  position: fixed;
  height: 50px;
  border-radius: 25px;
  background: black;
  color: white;
  font-family: "Jaune Mini Black";
  top : 50px;
  right : 50px;
  z-index: 100;
  padding: 5px 20px;
  transition: ease 0.5s;
}
.ctaGet:hover{
  transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}

.ctaGet a{
  color: white;
  border-bottom: 0px;
  line-height: 40px;
}

.ctaGetbig {
  width: 100%;
  text-align: center;
}

.ctaGetbig > a {
  width: 100%;
  background: white;
  text-align: center;
  padding: 20vh 10vw;
  border: 1px solid black;
  font-family: "Jaune Mini Black";
  display: block;
  border-radius: 30vh;
  /* transition: ease 2s; */
}
.ctaGetbig > a:hover{
  /* background-color: black;
  color: white;
  font-size: 3em; */
  animation:  zoom 2s ease infinite alternate ;
}

@keyframes zoom {
    0%{}
    40%{background-color: black;color: white;}
    80%{background-color: black;color: white;font-size: 3em;}
    100%{background-color: black;color: white;font-size: 3em;}
}


.credits {
  width: 100%;
  /* background: #888; */
  font-size: 0.8em;
  line-height: 1.4em;
  /* text-align: center;
  padding: 10vh 10vw; */
  border-top: 1px solid #444;
  /* border-bottom: 1px solid #444; */
  padding: 3px 0px;

}

/*------------Carroussel--*/
.images {

}
.video-slide{
  height: 100%;
  width: 50vw;
  /* background: black; */
}
.video-slide > .caption{
  color: #444;
  opacity: 0.8;
  text-align: center;
}

.images > div {
  /* max-width: 100%; */
  /* max-height: 100vh; */
  /* text-align: center; */
}
.images > div > div > img {
  /* max-width: 100%; */
  /* max-height: 80vh; */
  /* height: auto; */
  /* max-height: 100%; */
  /* width: auto; */
  /* flex-shrink: 1; */
  /* min-height: 0; */
  height: 80%;
  position: relative;
}

.caption{
  font-size: 0.7em;
  text-align: left;
  margin-before: 0em;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  margin-top: 0px;
  padding: 0 ;
  /* margin-bottom: 20px; */
  opacity: 0.2;
  transition: opacity 0.5s;
  width:100%;
  flex-grow: 0;
}
.caption:hover {
  opacity: 1;
}

.legende {
  /* grid-area: legende; */
  /* border-top: 1px solid  #444; */
  font-size: 0.8em;
  line-height: 1.8em;
  font-style: italic;
  padding-top: 10px;
  width: 100%;
}

.details{
  margin-top: 20%;
}


.etiquettes{
  margin-top: 0px;
  border-top: 1px solid #444;
  /* border-bottom: 1px solid #444; */
  padding: 3px 0px;
  list-style: none;
  margin-before : none;
  -webkit-margin-before : none;
  -webkit-padding-start : 0px;
  font-size: 0.8em;
  display: none;
}
.etiquettes > li {
  margin-top: 10px;
  display: inline;
  margin-right: 20px;
}




.buttonspied{
  position: fixed;
  bottom: 20px;
  width: calc(92vw);
  text-align: center;
  font-size: 0.6em;
  cursor: pointer;
  z-index: 98;
  cursor: pointer;
  color: black;
}

.buttonspied > *{
  font-family: "Jaune Mini Black";
  letter-spacing: 0.5px;
  display: inline;
  margin: 0px 10px;
  border-radius: 20px;
  background-color: #f6f8f5;
  padding: 0px 10px;
  transition: 0.5s ease;
  color: black;
  display: inline-block;

}
.buttonspied > *:hover{
  transform: scale(1.5);
  background-color: #AAA;
}

.infosbutton{
}

/*------------In use--*/



.inuses{
  background-color: ;
 display: flex;
 flex-wrap: wrap;
 max-width: 100%;
 align-items: flex-end;
}

.inuses h2{
  flex-basis: 100%;
}
.inuses h4{
  flex-basis: 100%;
}

.inuses h3, .inuses h4, .inuses h5, .inuses h6 {
  margin : 0px;
  /* display: inline-block; */
}
.inuses h5, .inuses h6 {
  text-align: right;
  max-width: 150px;
  line-height: 20px;
  /* color: white; */
}
.inuses h6 {
  margin-bottom: 10px;
}

.inuse{
  /* flex: 0 0 auto;
  /* border: 1px solid black; */
  /* max-width: 100%;
  margin: 0 5px 0px 0;
  padding: 5px 5px 0px 5px;
  line-height: 20px; */
}

.inusecredits{
  transform: rotate(-90deg) translateX(150px);
	transform-origin: right bottom ;
  float: right;
  height: auto;
  width: 150px;

  position: relative;
}
/* .inusecredits:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 10px solid white;
    border-left: 10px solid black;
    width: 0;
}
.inusecredits:after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    border-top: 10px solid black;
    border-left: 10px solid white;
    width: 0;
} */

.inuses > .images {
  display: flex;
  flex-wrap: wrap;

  transform-origin: center;

  /* align-items: flex-end; */
}
.inuses .img{
  margin: 0px 5px 5px 0px;
  height: 150px;
}


.inuse > .images > *, .inuses .img, .inusecredits{
  border: none;
  transition: 0.5s ease;

}
.inuses .img:hover{
  transform: scale(1.4);
}
.inuses .img:last-child{
  margin-right: 0px;
}

.inuses img {
  max-height: 150px;

}

.fancybox-lock .fancybox-overlay {
  background: url("images/bg.svg");
  background-color: transparent !important;
}


/*----------ABOUT----------------*/

.content.about{
  margin-bottom: 100px;
}

.contact {
 width: 70%;
 float: left;
}
.contact p:last-child {
  font-size: 0.75em;
  line-height: 1.6em;
}
.about .images{
  width: 30%;
  float: left;
  text-align: right;
  padding: 20px 0px 0px 0px;
  margin-top: 50px;
}

.about .caption{
  text-align: right;
}

.about .awards li, .about .publications li, .about .talks li, .about .exhibitions li, .about .teaching-workshops li {
  font-size: 0.9em;
  line-height: 1.4em;
  padding: 6px 0px 3px 0px;
}


.about .main ul, .about .main li {
  list-style: none;
  margin-left: 0px;
  padding-left: 0px;
  /* border-top: 1px solid black; */
}

.about .main li {
  border-top: 1px solid black;
}

.chapeau{
  font-size: 1em;
  margin-top: 120px;
  max-width: 700px;
}

.bios{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.bios > div{
  flex: 1 1 45%;
  min-width: 300px;
  margin-bottom: 100px;
}
.bios > div:nth-of-type(2n+1){
  margin-right: 30px;
}

.constellation{

}
.constellation ul{
  display: flex;
  flex-wrap: wrap;
  padding: 0px;
}
.constellation ul li {
  flex-basis: 30%;
  flex-grow: 1;
  flex-shrink: 0;
  list-style: none;

}

.footer{
  font-size: 0.7em;
  line-height: 1.6em;
}

/*---------News----------------*/

.news {
  grid-column-gap: 100px;
  grid-template-columns: 1fr 1fr 1fr;
}

.typeactu{
  grid-auto-columns: span 1;
  grid-row: 3;
}
.typeactu:nth-child(3){
  grid-column: 3;
}
.typeactu:nth-child(4){
  grid-column: 2;
}
.typeactu:nth-child(5){
  grid-column: 1;
}
.typeactu h2 {
  /* border-bottom: 1px solid black; */
  margin-top: 0px;
  margin-before: 0px;
  -webkit-margin-before : 0px;
  padding-bottom: 0px;
  font-weight: bold;
  margin-bottom: 2em;
}

.newspost {
 margin-bottom: 40px;
}
.newspost h4{
  margin-bottom: 0px;
  margin-after: 0px;
  -webkit-margin-after : 0px;
  border-top: 1px solid #444;
  padding-top: 10px;
  display: inline;
  letter-spacing: 1px;
}

.newspost p, .newspost .oeuvreliees{
  margin: 0px;
  margin-before: 0px;
  -webkit-margin-before : 0px;
  font-size: 0.9em;
  line-height: 1.3em;
}

.newspost img{
  margin: 10px 0px;
  max-height: 40vh;
  text-align: left;
}

.newspost > .images > div {
    text-align: left;
}
/*********************************************************************
 * 4. Footer
 *
 */

#footer {
  display: none;
  grid-column: 3 / -1;
	border-top: 1px solid #eee;
	font-size: 60%;
}

/*********************************************************************
 * 5. Media queries for responsive layout
 *
 */

@media only screen and (max-width: 767px) {
	/* mobile layout */

  h2{
    font-size: 2em;
  }
  .icon {
    width: 60px;
  }

	body, td, textarea {
		font-size: 100%;
	}
	body.has-sidebar .content,
	body.has-sidebar #sidebar {
		float: none;
		width: 100%;
		padding: 0;
	}
	form.search {
		float: none;
		width: 100%;
	}
	.content {
		width: 100%;
	}
	#sidebar {
		border-top: 1px solid #444;
		padding-top: 1em;
	}
	.align_left, .align_right, .align_center {
		display: block;
		float: none;
		margin: 1em auto;
		max-width: 100%;
	}

  /* Home */
  .etiquetteprojet {
    height: 170px;
    margin-bottom: 20px;
  }
  .etiquetteprojet img {
    max-height: 140px;
  }

  /* Projet */
  section.summary{
    font-size: 2em;
    max-width: 100%;
  }
  section{
    margin-bottom: 120px;
  }
  .inuses .img {
    height: 100px;
  }
  .inuses img{
    max-height: 100px;
  }
  .inusecredits{
    transform: rotate(0deg) translateX(0px);
    max-width: 100px;
    display: none;
  }
  .buttonspied{
    text-align: right;
  }
  .buttonspied > *{
    margin: 0px 3px;
  }
  .ctaGet{
    height: 40px;
    top: 20px;
    right: 20px;
  }
  .ctaGet a{
    font-size: 0.80em;
    line-height: 30px;
  }

  /*About  */
  .contact{
    width:100%;
  }
  .about .images {
    width: 100%;
    float: none;
  }
  .bios > div:nth-of-type(2n+1) {
    margin-right: 0px;

}


}

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

  h1{
    font-size: 25px;
  }

  .home p, .summary {
    font-size: 2em;
  }

  .content{
    grid-template-rows: 100px 50px 1fr;
    grid-template-columns: 1fr;
    grid-template-areas: "titre" "menu" "sidebar" "main" "legende";
    justify-items : end;
    grid-auto-flow : row dense;
  }

  .header{
    width: 100%;
  }
  .content .header h1 {
    font-size: 2.5em;
    line-height: 1em;
  }

  .span3{
    grid-column: span 1;
  }
  .home img {
    grid-column: 1 / -1;
    z-index: 0;
  }

  .filtres {
    height: 60px;
    flex-wrap: wrap;
    left: 0px;
    padding: 0px 15px;
    width: 100vw;
    justify-content: start;
  }
  .filtres > * {
    line-height: 1.1em;
    margin: 0px 5px;
    padding: 5px;
  }
  .content .images {
    /* grid-column: 1 ;
    grid-row: 3 / span 2; */
  }
  .swiper-slide{
    display: block;
  }
  .images > div > div > img{
    height: auto;
  }
  .cartel > p:first-of-type {
    padding-left: 0em;
    padding-right: 0em;
    font-size: 0.80em;
    line-height: 1.35em;
  }
  .typeactu, .typeactu:nth-child(3), .typeactu:nth-child(4), .typeactu:nth-child(5){
    grid-column: 1;
    grid-row: auto;
  }
  .typeactu:nth-child(4){
    grid-row: 3;
  }

  .constellation ul li {
    flex-basis: 50%;
}

}
@media only screen and (min-width: 1200px) {
	/* extra-wide desktop layout */

	body, td, textarea {
		/* font-size: 105%; */
	}
}
/*********************************************************************
 * 6. Accessibility helpers
 *
 */

/* Hide visually, but remain approachable for screenreader */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	white-space: nowrap;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	border: 0;
}

/* Show bypass link on hover */

.element-focusable:focus {
	clip: auto;
	overflow: visible;
	height: auto;
}

/* Sample styling for bypass link */

.bypass-to-main:focus {
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #333;
	color: #fff;
}