@font-face {
    font-family: 'SuisseIntl';
    src:    url('../font/SuisseIntl-SemiBold.ttf');
    font-weight: normal;
    font-style: normal;
}

html{
	cursor: crosshair;
}

body{
	width: 100vw;
	height: 100vh;
	font-family: "SuisseIntl";
	background-color: #fff;
	overflow: hidden;
}

body::-webkit-scrollbar {
    display: none;
}

a{
	text-decoration: none;
	color: black;
}

a:hover{
	cursor: pointer;
	color: #B9BBCE;
}

#gray{
	color: #B9BBCE;
}

/*HEADER	HEADER	HEADER	HEADER*/
header{
	width: 100vw;
	position: fixed;
	top: 1vh;
	z-index: 98;
}

#info-bar{
	width: 98%;
	margin: 0 1vw;
	display: inline-flex;
    justify-content: space-between;
}

#bar-column, #bar-column-text{
	font-size: .85vw;
	display: inline-flex;
}

#bar-column-2-text{
	width: 30%;
}

.name{
	white-space: pre;
	margin-right: 1.5vw;
}

/*SCROLL  SCROLL  SCROLL  SCROLL*/
#grid_index_section{
	width: 98vw;
	height: 80vh;
	margin: 10vh auto;
}

#grid_index_box{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(5, 40%);
	column-gap: 1vw;
    row-gap: 15vh;
	height: 100%;
}

#grid_index_box a:hover{
    text-decoration: none;
} 


#image-box-index{
    height: 90%;
    grid-column: span 1;
} 

#image-box-index img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.info-img-index{
	width: 100%;
	display: inline-flex;
	margin-top: .2vh;
	justify-content: center;
}

.projet-name{
	margin-right: .5vw;
	text-align: center;
	font-size: .85vw;
}

.date{
	text-align: center;
	font-size: .85vw;
	color: #B9BBCE;
}

#footer_index_playground{
	position: fixed; 
	bottom: 0;
	width: 100vw;
	height: 3vh;
	display: inline-flex;
	font-size: .85vw;
}

.page-index-playground{
	margin-left: 1vw;
	width: 33%;
}


/*PROJET PROJET PROJET  PROJET*/
#info_projet{
	position: absolute; 
	bottom: 1.5vh;
	width: 100vw;
	height: auto;
	display: inline-flex;
	font-size: .85vw;
	z-index: 98;
	line-height: 1.8vh;
}

.titre_projet, .description_projet, .credit_projet, .next_projet{
	align-self: flex-end;
}

.titre_projet{
	margin: 0 3vw 0 1vw;
	width: 12%;
}

.description_projet{
	width: 60%;
	color: #B9BBCE;
}

.credit_projet{
	width: 25%;
	margin-right: 2vw;
}

#link{
	color: #B9BBCE;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.next_projet{
	text-align: right;
	margin-right: 1vw;
}


#carousel_conteneur{
    width: 70vw;
    height: 85vh;
    margin: 4vh auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.carousel{
	height: 100%;
	width: 100%;
}

.carousel img {
	position: absolute;
	width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    cursor: e-resize;
}

.carousel iframe{
	position: absolute;
	width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    cursor: e-resize;
}

.carousel img.active {
    opacity: 1;
    position: relative;
}

/*PLAYGROUND  PLAYGROUND  PLAYGROUND*/
#grid_playground_section{
	width: 95vw;
	height: 100vh;
	margin: 7vh auto;
}

#grid_playground_box{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: center;
	grid-gap: 3.5vw;
	grid-row-gap: 7vh;
	height: 100%;
	width: 100%;
}

#image-box{
    vertical-align: top;
    grid-column: span 1;
    /*width: 100%;
    aspect-ratio: 1 / 1;*/
}

#image-box img{
	width: 100%;
    /*height: 100%;*/
    object-fit: contain;
}

/*ABOUT		ABOUT	ABOUT	ABOUT*/
#description_about{
	width: 40vw;
}

#texte_about, #services_about{
	font-size: .85vw;
	line-height: 1.8vh;
	margin: 3vh 0 0 1vw;
}

#services_about{
	width: 45%;
}

#footer_about{
	position: absolute; 
	bottom: 0;
	width: 100vw;
	height: 3vh;
	display: inline-flex;
	font-size: .85vw;
}

.mail{
	margin-left: 1vw;
	width: 33%;
}

.location{
	width: 33%;
}

.copyright{
	width: 33%;
	text-align: right;
	margin-right: 1vw;
}


/*      --- RESPONSIVE ---      */
/*      --- RESPONSIVE ---      */
/*      --- RESPONSIVE ---      */
/*      --- RESPONSIVE ---      */

@media screen and (max-width: 700px) {
/*      --- INDEX ---      */
body{
	height: 100vh;
	overflow-y: scroll;
}

#info-bar{
	display: flex;
    width: 96%;
    margin: auto;
    justify-content: space-between;
}

#bar-column, #bar-column-text{
    font-size: 2.7vw;
}

#header-index .detail{
	display: none;
}

#grid_index_box{
	display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 5vh;
}

.projet-name, .date{
	font-size: 3vw;
}

.name, .menu{
	font-size: 3vw;
}

/*      --- PROJETS ---      */
#carousel_conteneur{
    width: 95vw;
    height: 85vh;
    margin: 5vh auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.carousel{
	height: 100%;
	width: 100%;
}

.carousel img {
	position: absolute;
	width: 100%;
    height: 95%;
    object-fit: contain;
    opacity: 0;
    cursor: e-resize;
}

.carousel iframe{
	position: absolute;
	width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    cursor: e-resize;
}

.carousel img.active {
    opacity: 1;
    position: relative;
}

#info_projet{
	position: absolute; 
	bottom: 2vh;
	width: 97vw;
	margin: auto;
	height: auto;
	display: inline-flex;
	font-size: 3vw;
	z-index: 98;
	line-height: 1.8vh;
}

.titre_projet{
	width: 100%;
	margin-left: 2vw;
}

.description_projet{
	width: 100%;
}

#link{
	color: #B9BBCE;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.credits_projet{
	width: 100%;
}

.role_projet{
	color: #B9BBCE;
}

.next_projet{
	text-align: right;
}

#grid_projet_section{
    width: 96vw;
    height: 100vh;
    margin: 30vh auto 0;
    position: relative;
    z-index: 2;
}

#image-box-projet{
    vertical-align: top;
    grid-column: span 1;
    width: 100%;
    aspect-ratio: unset;
}

#bar-column-1-projet, #bar-column-2-projet, #bar-column-3-projet, #bar-column-4-projet{
	font-size: 2.5vw;
    line-height: 2vh;
    width: 95%;
}

#bar-column-1-projet .detail{
	font-size: 2.2vw;
	margin-left: 8vw;
}

#bar-column-2-projet{
	margin-top: 2vh;
}

#bar-column-3-projet{
 display: inline-block;
 margin-top: 2vh;
}

.next{
	text-align: right;
}

/*      --- ABOUT ---      */
#description_about{
	width: 95vw;
}

#texte_about, #services_about{
	font-size: 3vw;
    line-height: 2vh;
}

#texte_about{
	margin: 5vh 5vw 0;
}

#services_about{
	width: 70%;
	margin: 2vh 5vw 0;
}

#footer_about{
	font-size: 3vw;
}

.location{
	width: 25%;
}

.copyright{
	width: 40%;
}

/*      --- PLAYGROUND ---      */
#grid_playground_box{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-content: center;
	grid-gap: 2vw;
	grid-row-gap: 2vh;
	height: 100%;
	width: 100%;
}

}