:root{
	--main-color: black;
	--background-color: white;
	--accent-color: lightgreen;
	--swiper-theme-color: black;
	--color1: white;
}

@font-face {
 font-family: "Ortica";
 src: url("fonts/ortica/Ortica-Light.otf") format("opentype"),
        url("fonts/ortica/Ortica-Light.woff") format("woff"),
       		url("fonts/ortica/Ortica-Light.woff2") format("woff2");
}

@font-face {
 font-family: "Apfel";
 src: url("fonts/apfel/ApfelGrotezk-Regular.otf") format("opentype"),
        url("fonts/apfel/ApfelGrotezk-Regular.woff") format("woff"),
       		url("fonts/apfel/ApfelGrotezk-Regular.woff2") format("woff2");
}

@font-face {
 font-family: "Apfelbrukt";
 src: url("fonts/apfel/ApfelGrotezk-Brukt.otf") format("opentype"),
        url("fonts/apfel/ApfelGrotezk-Brukt.woff") format("woff"),
       		url("fonts/apfel/ApfelGrotezk-Brukt.woff2") format("woff2");
}

::selection {
  background-color: var(--accent-color);
  color: var(--main-color);
}

body{
	background-color: var(--background-color);
	cursor: url("../img/cursor/main.svg") 16 16, auto;
}


header{
	width: 100vw;
	box-sizing: border-box;
	color: var(--main-color);
	font-family: "Apfel";
	font-size: 1.25rem;
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    /*padding-right: 1.5rem;*/
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
}


a {
	color: var(--main-color);
	text-decoration: none;
	cursor: url("../img/cursor/clic.svg") 16 16, pointer;
}

a:hover {
	color: var(--accent-color);
}

#infos a{
	font-family: "Apfel";
	text-decoration: underline;
}

#infos a:hover {
	color: var(--main-color);
	text-decoration: none;
}

.mail {
	/*grid-column: 4;*/
	text-decoration: none;
	font-family: "Apfel";
}

.mail:hover {
	text-decoration: underline;
	color: var(--main-color);
}

h2{
	grid-column: 2/4;
}

header h3{
	grid-column: 4;
	color: var(--accent-color);
	text-decoration: none;
	cursor: url("../img/cursor/clic.svg") 16 16, pointer;
}

header h3:hover {
	color: var(--main-color);
}

#conteneur {
	width: 100%;
	box-sizing: border-box;
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    /*padding-right: 1.5rem;*/
    
}


main{
	width: 100%;
	grid-column: 2/5;
	margin-top: 7vh;
	display: grid;
	grid-template-columns: 1fr;
	grid-row-gap: 2rem;
}

#infos{
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	width: calc( (((100vw - 3rem) - (3 * 10px) ) / 4) + 1.5rem );
	height: 100vh;
	padding-top: 10vh;
	padding-left: 1.5rem;
	background-color: var(--accent-color);
	z-index: 2;
	display: none;
}

#infos.active{
	display: initial;
	z-index: 2;
}

#infoClose{
	width: 30px;
	height: 30px;
	position: fixed;
	top: 1rem;
	left: calc( (((100vw - 3rem) - (3 * 10px) ) / 4) + 0.5rem - 40px);;
	z-index: 5;
	cursor: url("../img/cursor/clic.svg") 16 16, pointer;
	display: none;
}

#infoClose.active{
	display: initial;
}

aside{
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	width: calc( (((100vw - 3rem) - (3 * 10px) ) / 4) + 1.5rem );
	height: 100vh;
	background-color: var(--background-color);
	padding-top: 10vh;
	padding-left: 1.5rem;
}



.moi {
	margin-top: 2em;
	width: 90%;
	font-family: "Apfel";
	font-size: 1em;
}

.droit{
	font-family: "Apfel";
	font-size: 0.8em;	
}

#clair{
	font-family: "Apfel";
	font-size: 1em;
	color: var(--accent-color);
}
nav {
	margin-top: 2rem;
	font-family: "Ortica";
}


ol{
	list-style: upper-latin outside;
	margin-left: 1rem;
}


li{
	font-family: "Ortica";
	margin-top: 0.1em;
}


.index_titre {
	font-family: "Apfel";
	font-size: 1.25em;
}


footer {
	box-sizing: border-box;
	vertical-align: bottom;
	width: calc( (((100vw - 3rem) - (3 * 10px) ) / 4) + 1.5rem );
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 3;
	padding-top: 0.5rem;
	padding-left: 1.5rem;
	padding-bottom: 1rem;
}

img{
	display: inline-block;
/*	margin: 3% auto;
*/	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

.projet {
	font-family: "Ortica";
	width: calc( (((((100vw - 3rem) - 3 * 10px) / 4) * 3) + 20px) - 1.5rem );
	height: 80vh;
}

.projet.video {
	height: auto;
}

.projet.appli {
	height: auto;
}

.projet.appli iframe {
	height: 80vh;
	width: calc(80vh / (667 / 375));
	/*667/375*/
	box-shadow: 0px 3px 10px #dedede;
}

.galerie {
	margin-top: 3px;
	width: calc( (((((100vw - 3rem) - 3 * 10px) / 6) * 3) + 20px) - 1.5rem );
	height: 60vh;
}

.legende{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-row: 1;
	padding-top: 0.5rem;
	grid-gap: 10px;

}

.showMore{
	color: var(--accent-color);
	font-family: "Apfel";
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}

.showMore:hover{
	color: var(--main-color);
}




.categorie{
grid-row: 1;
font-family: "Ortica";
grid-column: 1;

}

.description {
	font-family: "Apfel";
	grid-row: 1;
	grid-column: 2/5;
}

.description a {
	text-decoration: underline;

}

.date{
	grid-row: 1;
	font-family: "Ortica";

}


.swiper {
	margin-left: 0;
	margin-right: 0;
    /*width: calc( (((((100vw - 3rem) - 3 * 10px) / 4) * 3) + 20px) );
    height: 80vh;*/
    height: 100%;
    width: 100%;
}

.swiper-button-next{
	right: 0;
	top: 0;
	width: 50%;
	height: 100%;
	cursor: url("../img/cursor/droite.svg") 16 16, e-resize;
}

.swiper-button-prev{
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
	cursor: url("../img/cursor/gauche.svg") 16 16, w-resize;
}

.swiper-button-prev:after, .swiper-button-next:after{
	display: none;
}

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      width: auto;

      /* Center slide text vertically */
      /*display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;*/
    }


.swiper-pagination-bullet{
	background-color: var(--accent-color);
}




#blankSpaceBottom{
	margin-bottom: 20vh;
}