body, html {
	background-color: #FEF7F1;
	margin: 0px;
	height: auto;
	overflow-x: hidden; 
	overflow-y: scroll;
}

#band1 {
	background-color: black;
	height: 4vh;
	overflow: hidden;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
}

#bandtxt1 {
	font-family: MADETOMMYb;
	text-transform: uppercase;
	font-size: 2vh;
	white-space: nowrap;
	margin-top: 0.85vh;
	color: white;
	letter-spacing: 1px;
	height: 2.4vh;
	
	animation-name: scroll1;
	animation-duration: 40s;
	animation-timing-function: linear;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

@keyframes scroll1 {
	from {
		margin-left: 0px;
	}

	to {
		margin-left: -3000px;
	}
}

#band2 {
	background-color: black;
	height: 4vh;
	overflow: hidden;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	margin-top: 6vh;
}

#bandtxt2 {
	font-family: MADETOMMYb;
	text-transform: uppercase;
	font-size: 2vh;
	white-space: nowrap;
	margin-top: 0.85vh;
	color: white;
	letter-spacing: 1px;
	height: 2.4vh;
	
	animation-name: scroll2;
	animation-duration: 40s;
	animation-timing-function: linear;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

@keyframes scroll2 {
	from {
		margin-left: -3000px;
	}

	to {
		margin-left: 0px;
	}
}

#header {
	width: 84vw;
	height: 11vh;
	margin-left: 8vw;
	display: flex;
}

#ballcont {
	padding-top: 2.4vh;
}

#ball {
	height: 6vh;
	position: absolute;
	z-index: 2;
	animation-name: rotate;
	animation-duration: 1s;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

#shade {
	height: 6vh;
	width: 6vh;
	background-color: black;
	border-radius: 3vh;
	position: relative;
	z-index: 1;
	left: 0.3vh;
	top: 0.3vh;
	animation-name: trans;
	animation-duration: 0.5s;
}

#hamcont {
	position: absolute;
	right: 8vw;
	padding-top: 2.4vh;
	z-index: 5;
}

#ham1{
	height: 6vh;
	position: absolute;
	z-index: 2;
	cursor: pointer;
	transition: 0.3s;
}

#ham2{
	height: 6vh;
	position: relative;
	z-index: 1;
	left: 0.3vh;
	top: 0.3vh;
	animation-name: trans;
	animation-duration: 0.5s;
	transition: 0.3s;
}

@keyframes trans {
	from {
		left: 0vh;
	    top: 0vh;
	}

	to {
		left: 0.3vh;
	    top: 0.3vh;
	}
}

#homecont {
	width: 84vw;
	height: 70vh;
	margin-left: 8vw;
	margin-top: 5vh;
	display: flex;
}

#left{
	z-index: 1;
	height: 100%;
	width: 55%;
	overflow: hidden;
}

#titre {
	margin-top: 1vw;
	font-family: PHONK;
	font-size: 6.1vw;
	font-weight: lighter;
	margin-bottom: 0vh;
	-webkit-text-stroke-width: 0.15vw;
    -webkit-text-stroke-color: black;
    color: white;
    text-shadow: 0.8vh 0.8vh black;
}

#soustitre{
	font-family: APPLEr;
	font-weight: lighter;
	font-size: 3.8vh;
	line-height: 3.7vh;
	margin-top: 4vh;
}

#space{
	z-index: 1;
	height: 100%;
	width: 15%;
}

#right{
	z-index: 1;
	height: 100%;
	width: 35%;
	display: flex;
	opacity: 1;
	transition: 0.25s;
	margin-top: 0px;
	animation-name: updown;
	animation-duration: 1.5s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
}

#right.fade {
	opacity: 0;
}

@keyframes updown {
	from {
		margin-top: -20px;
	}

	to {
		margin-top: 0px;
	}
}

#aboutmoi {
	position: absolute;
	z-index: 10;
	font-family: PHONK;
	margin-top: 43vh;
	margin-left: -3vh;
	font-size: 5vh;
	opacity: 0;
	color: #FFFFFF;
	-webkit-text-stroke: 1px black;
	text-shadow: 0.5vh 0.5vh black;
}

#moi {
	transform: translateY(-12.5%);
	height: 105%;
	width: 100%;
	object-fit: cover;
	z-index: 1;
}

#shadow {
	width: 28vw;
	height: 54.3vh;
	background-color: black;
	position: absolute;
    margin-top: 10vh;
    outline-width: 0.55vh;
    outline-style: solid;
    outline-color: black;
    transform: translate(2vh, 2vh);
    animation-name: trans2;
	animation-duration: 1s;
}

@keyframes trans2 {
	from {
		transform: translate(0vh, 0vh);
	}

	to {
		transform: translate(2vh, 2vh);
	}
}

#grand1 {
	width: 28vw;
	height: 54.3vh;
	background-color: white;
	position: absolute;
    margin-top: 10vh;
    outline-width: 0.55vh;
    outline-style: solid;
    outline-color: black;
}

#grand2 {
	width: 28vw;
	height: 51.3vh;
	position: absolute;
    margin-top: 13vh;
    z-index: 6;
	cursor: pointer;
	overflow: hidden;
    background: transparent;
	opacity: 0;
	transition: 0.35s;
}

#grand2.fade {
	opacity: 1;
}

#moyen {
	width: 28vw;
	height: 3vh;
	background-color: white;
	position: absolute;
    margin-top: 10vh;
    outline-width: 0.55vh;
    outline-style: solid;
    outline-color: black;
}

#petit {
	width: 3vh;
	height: 3vh;
	background-color: white;
	position: absolute;
    margin-top: 0vh;
    right: 8vw;
	margin-top: 10vh;
    outline-width: 0.55vh;
    outline-style: solid;
    outline-color: black;
    cursor: pointer;
	z-index: 5;
}

#croixcont {
    margin-left: 1.225vh;
}

#croix1 {
	transform: rotate(45deg);
	width: 0.55vh;
	height: 3vh;
	background-color: black;
	position: absolute;
}

#croix2 {
	transform: rotate(-45deg);
	width: 0.55vh;
	height: 3vh;
	background-color: black;
	position: absolute;
}

#videocont{
	position:absolute;
	width: 100vw;
	height: 50vh;
	transform: translate(0%,-50%);
	margin-top: 53vh;
	overflow: hidden;
}

#backmoi{
	z-index: 0;
	height: 50vh;
	transform: translate(-50%,0%);
	margin-left: 78vw;
}

#band3 {
	width: 100%;
	height: 10vh;
	background-color: transparent;
	outline: solid 1px black;
	overflow: hidden;
}

#bandtxt3 {
	font-family: MADETOMMYb;
	text-transform: uppercase;
	font-size: 5vh;
	white-space: nowrap;
	margin-top: 0vh;
	padding-top: 2vh;
	
	animation-name: scroll1;
	animation-duration: 40s;
	animation-timing-function: linear;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

@keyframes scroll1 {
	from {
		margin-left: 0px;
	}

	to {
		margin-left: -3000px;
	}
}






#photo {
	background-color: #FEF7F1;
	box-shadow: 0 1px 0 #000;
	overflow: hidden;
	height: 19vh;
}

.titrediv {
	margin: 4.75vh 0px 6.5vh 8vw;
	font-family: APPLEr;
	font-size: 8vh;
}

#titrediv {
	margin: 4.75vh 0px 6.5vh 8vw;
	font-family: APPLEr;
	font-size: 8vh;
}

#arrow1 {
	position: absolute;
	right: 8vw;
	height: 7vh;
	margin-top: -14.3vh;
	cursor: pointer;
	transition: 0.5s;
}

.images1 {
	height: 18.75vw;
	width: 92vw;
	margin-left: 8vw;
	margin-top: 6vh;
	display: flex;
}

.images2 {
	height: 18.25vw;
	width: 92vw;
	margin-left: 8vw;
	margin-top: 6vh;
	display: flex;
}

.images3 {
	height: 14.625vw;
	width: 92vw;
	margin-left: 8vw;
	margin-top: 6vh;
	display: flex;
}

.images4 {
	height: 14.625vw;
	width: 92vw;
	margin-left: 8vw;
	margin-top: 6vh;
	display: flex;
}

.images5 {
	height: 18.25vw;
	width: 92vw;
	margin-left: 8vw;
	margin-top: 6vh;
	display: flex;
}

.photos {
	height: 100%;
	width: 15vw;
	margin-right: 2.25vw;
	border-radius: 1.25vw;
	cursor: pointer;
    filter: brightness(1);
}

.photos:hover {
    filter: brightness(0.75);
    transition: 0.25s;
}

.graphs {
	height: 100%;
	width: 18.25vw;
	margin-right: 3.66vw;
	border-radius: 1.25vw;
	cursor: pointer;
    filter: brightness(1);
}

.graphs:hover {
    filter: brightness(0.75);
    transition: 0.25s;
}

.tds {
	height: 100%;
	width: 18.25vw;
	margin-right: 3.66vw;
	border-radius: 1.25vw;
	cursor: pointer;
    filter: brightness(1);
}

.tds:hover {
    filter: brightness(0.75);
    transition: 0.25s;
}

#lhfc {
	filter: brightness(0.95);
}

#lhfc:hover {
	filter: brightness(0.7125);
}

.videos {
	height: 100%;
	width: 26vw;
	margin-right: 3vw;
	border-radius: 1.25vw;
	cursor: pointer;
    filter: brightness(1);
}

.videos:hover {
    filter: brightness(0.75);
    transition: 0.25s;
}

.webdes {
	height: 100%;
	width: 26vw;
	margin-right: 3vw;
	border-radius: 1.25vw;
	cursor: pointer;
    filter: brightness(1);
}

.webdes:hover {
    filter: brightness(0.75);
    transition: 0.25s;
}

#reborder{
	border: solid 1px black;
}




.arroww {
    height: 30px;
    transform: rotate(-90deg);
    margin-left: -30px;
}

.vp {
    font-family: MADETOMMYr;
    font-weight: 500;
    margin: 0px;
    font-size: 25px;
    margin-left: 20px;
    margin-top: 1px;
	color: black;
}

.but {
    display: flex;
    border: 1px solid black;
    border-radius: 100px;
    cursor: pointer;
    flex-wrap: nowrap;
    width: 145px;
    align-items: center;
    overflow: hidden;
    padding: 10px 10px 10px 16px ;
    transition: padding .5s cubic-bezier(0.25, 0.0, 0.0, 1.000);

    margin-left: 8vw;
    margin-top: 5.5vh;
}

.but:hover{
    padding-left: 58px;
}

.but .arroww{
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.but:hover .arroww{
    opacity: 1;
}


.space {
	height: 5.5vh;
}




#graph {
    background-color: transparent;
    box-shadow: 0 1px 0 #000;
    overflow: hidden;
    height: 19vh;
}

#td {
    background-color: transparent;
    box-shadow: 0 1px 0 #000;
    overflow: hidden;
    height: 19vh;
}

#arrow2 {
    position: absolute;
    right: 8vw;
    height: 7vh;
    margin-top: -14.3vh;
    cursor: pointer;
    transition: 0.5s;
}


#video {
    background-color: transparent;
    box-shadow: 0 1px 0 #000;
    overflow: hidden;
    height: 19vh;
}

#arrow3 {
    position: absolute;
    right: 8vw;
    height: 7vh;
	margin-top: -14.3vh;
    cursor: pointer;
    transition: 0.5s;
}

#webde {
    background-color: transparent;
    box-shadow: 0 1px 0 #000;
    overflow: hidden;
    height: 19vh;
}

#arrow4 {
    position: absolute;
    right: 8vw;
    height: 7vh;
    margin-top: -14.3vh;
    cursor: pointer;
    transition: 0.5s;
}

#arrow5 {
    position: absolute;
    right: 8vw;
    height: 7vh;
    margin-top: -14.3vh;
    cursor: pointer;
    transition: 0.5s;
}




#band4 {
	width: 100%;
	height: 10vh;
	background-color: transparent;
	box-shadow: 0 1px 0 #000;
}

#bandtxt4 {
	font-family: MADETOMMYb;
	text-transform: uppercase;
	font-size: 5vh;
	white-space: nowrap;
	margin-top: 0vh;
	padding-top: 2vh;
	
	animation-name: scroll2;
	animation-duration: 40s;
	animation-timing-function: linear;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}



#modal {
	position: fixed;
	background-color: rgba(0, 0, 0, 0.90);
	height: 100vh;
	width: 100vw;
	z-index: 11;
	animation-name: modal;
	animation-duration: 0.25s;
	display: none;
}

#modalimg {
	position: fixed;
	height: 90vh;
	width: auto;
	z-index: 11;
	margin-top: 5vh;
	border-radius: 1.5vh;
	transform: translate(-50%);
	left: 50vw;
}

#modalimg2 {
	position: fixed;
	height: 90vh;
	width: auto;
	z-index: 11;
	margin-top: 5vh;
	border-radius: 1.5vh;
	transform: translate(-50%);
	left: 50vw;
}

iframe {
	display: none;
	position: fixed;
	height: 90vh;
	width: 160vh;
	z-index: 11;
	border-radius: 1.5vh;
	transform: translate(-50%, -50%);
	left: 50vw;
	top: 50vh;
}

#modalcroix {
	position: absolute;
	top: 6vh;
	right: 6vh;
	height: 3vh;
	cursor: pointer;
	z-index: 100;
}

#modalcroix:hover {
	transform: scale(1.1);
	transition: 0.35s;
}

#ghost {
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 10;
}

@keyframes modal {
	from {
		opacity: 0%;
	}

	to {
		opacity: 100%;
	}
	
}






#fsmenu {
	position: fixed;
	background-color: black;
	z-index: 100;
	width: 100%;
	height: 100%;
	display: none;
	animation-name: fademenu;
	animation-duration: 0.25s;
	animation-fill-mode : forwards;
	opacity: 0%;
}

#fsmenu2 {
	position: fixed;
	background-color: black;
	z-index: 100;
	width: 100%;
	height: 100%;
	display: none;
	animation-name: fademenu;
	animation-duration: 0.25s;
	animation-fill-mode : forwards;
	opacity: 0%;
}

@keyframes fademenu {
	from {
		opacity: 0%;
	}

	to {
		opacity: 100%;
	}
}

#croix {
	height: 6vh;
	cursor: pointer;
	position: absolute;
	right: 8vw;
	margin-top: 6.4vh;
	z-index: 5;
	animation-name: fademenu;
	animation-delay: 0.3s;
	animation-duration: 0.5s;
	animation-fill-mode : forwards;
	opacity: 0%;
}

#croix:hover {
	transform: scale(1.05);
	transition: 0.35s;
}

.spacer2 {
	width: 2vh;
}

#moinb {
    position: absolute;
    height: 80vh;
    width: auto;
    border-radius: 2000px 2000px 0px 0px;
    border: 0.6vh solid #FEF7F1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	animation-name: moi;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes moi {
	from {
		top: 60%;
		opacity: 0;
	}
	to {
		top: 50%;
		opacity: 1;
	}
	
}

#moishade {
    position: absolute;
    height: 85vh;
    width: 100vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8925945378151261) 12%, rgba(0,0,0,0) 100%);
    z-index: 1;
	animation-name: moi;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

#contact {
    position: absolute;
    color: #FEF7F1;
    font-family: APPLEi;
	font-weight: normal;
    left: 50%;
    top: 40.75%;
    transform: translate(-50%, -50%);
    z-index: 10;
    font-size: 32vh;
    margin: 0px;
    mix-blend-mode: difference;
	animation-delay: 0.25s;
	animation-name: contact;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes contact {
	from {
		left: 45%;
		opacity: 0;
	}
	to {
		left: 50%;
		opacity: 1;
	}
	
}

#contbox {
    position: absolute;
    display: flex;
    left: 50%;
    transform: translate(-44.1vh, 0%);
    top: 59vh;
    height: auto;
    width: 10000px;
    border-top: 1px solid #FEF7F1;
    border-bottom: 1px solid #FEF7F1;
    z-index: 3;
    color: #FEF7F1;
	animation-delay: 0.5s;
	animation-name: contbox;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes contbox {
	from {
		left: 55%;
		opacity: 0;
	}
	to {
		left: 50%;
		opacity: 1;
	}
	
}

#ytinsta {
	display: flex;
}

#mailcv {
	display: flex;
}

.reseaux span {
    font-family: MADETOMMYt;
    font-size: 2vh;
    white-space: nowrap;
    color: #FEF7F1;
}

.reseaux {
	margin-top: 2vh;
	margin-bottom: 1.8vh;
	font-family: APPLEr;
    font-size: 3vh;
    white-space: nowrap;
    color: #FEF7F1;
    cursor: pointer;
    transform: scale(1);
	line-height: 2.75vh;
}

.reseaux:hover {
    transform: scale(1.05);
    transition: 0.25s;
}

.spacecont {
    width: 5.5vw;
}

#about {
    position: absolute;
    color: #FEF7F1;
    font-family: APPLEi;
    left: 50%;
    top: 39vh;
    transform: translate(-50%, -50%);
    z-index: 10;
    font-size: 25vh;
	font-weight: normal;
	white-space: nowrap;
	line-height: 21vh;
    margin: 0px;
	width: 114vh;
    mix-blend-mode: difference;
	animation-delay: 0.25s;
	animation-name: contact;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes contact {
	from {
		left: 45%;
		opacity: 0;
	}
	to {
		left: 50%;
		opacity: 1;
	}
	
}

#aboutbox {
    position: absolute;
    display: block;
    left: 50%;
    transform: translate(-53.4vh, 0%);
    top: 63vh;
    height: auto;
    width: 10000px;
    border-top: 1px solid #FEF7F1;
    border-bottom: 1px solid #FEF7F1;
    z-index: 3;
    color: #FEF7F1;
	animation-delay: 0.5s;
	animation-name: aboutbox;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes aboutbox {
	from {
		left: 55%;
		opacity: 0;
	}
	to {
		left: 50%;
		opacity: 1;
	}
	
}

#moinb2 {
    position: absolute;
    height: 80vh;
    width: auto;
    border-radius: 2000px 2000px 0px 0px;
    border: 0.6vh solid #FEF7F1;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
	animation-name: moi2;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes moi2 {
	from {
		top: 60%;
		opacity: 0;
	}
	to {
		top: 50%;
		opacity: 1;
	}
	
}

#moishade2 {
    position: absolute;
    height: 85vh;
    width: 100vh;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8925945378151261) 12%, rgba(0,0,0,0) 100%);
    z-index: 1;
	animation-name: moi2;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.aboutpara {
	font-family: MADETOMMYt;
	font-size: 2.25vh;
	font-weight: normal;
	margin: 0px;
	margin-top: 2.2vh;
	width: 107vh;
	text-align: justify;
	opacity: 0;
	letter-spacing: normal;
}

#aboutpara1 {
	animation-name: aboutpara;
	animation-duration: 1s;
	animation-delay: 0.75s;
	animation-fill-mode: forwards;
}

#aboutpara2 {
	animation-name: aboutpara;
	animation-duration: 1s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}


#aboutpara3 {
	animation-name: aboutpara;
	animation-duration: 1s;
	animation-delay: 1.25s;
	animation-fill-mode: forwards;
	margin-bottom: 2.5vh;
}


@keyframes aboutpara {
	from {
		opacity: 0;

	}
	to {
		opacity: 1;

	}
	
}





















@media screen and (max-width: 1400px){
	.photo5 {
		display: none;
	}

	.photos {
		width: 18vw;
		margin-right: 4vw;
	}

	.images1 {
		height: 22.5vw;
	}

	.graphs {
		width: 23vw;
		margin-right: 7.5vw;
	}

	.tds {
		width: 23vw;
		margin-right: 7.5vw;
	}

	.images2 {
		height: 22.5vw;
	}

	.images5 {
		height: 22.5vw;
	}

	.videos {
		width: 40vw;
		margin-right: 4vw;
	}

	.images3 {
		height: 23vw;
	}

	.webdes {
		width: 40vw;
		margin-right: 4vw;
	}

	.images4 {
		height: 23vw;
	}
    
}




@media screen and (max-width: 825px){
	.photo4 {
		display: none;
	}

	.photos {
		width: 24vw;
		margin-right: 6vw;
	}

	.images1 {
		height: 30vw;
	}

	.graphs {
		width: 37vw;
		margin-right: 10vw;
	}

	.tds {
		width: 37vw;
		margin-right: 10vw;
	}

	.images2 {
		height: 37vw;
	}

	.images5 {
		height: 37vw;
	}

	.videos {
		width: 84vw;
		margin-right: 0vw;
	}

	.images3 {
		height: 47.25vw;
	}

	.webdes {
		width: 84vw;
		margin-right: 0vw;
	}

	.images4 {
		height: 47.25vw;
	}

	.tds {
		width: 37vw;
		margin-right: 10vw;
	}
}

@media screen and (max-width: 1383px){
	#space {
		width: 5vw;
	}

	#right {
		width: 45%;
	}

	#grand1 {
		width: 35.65%;
	}

	#grand2 {
		width: 35.65%;
	}

	#shadow {
		width: 35.65%;
	}

	#moyen {
		width: 35.65%;
	}
}

@media screen and (max-width: 1125px){
	#about {
		top: 34vh;
		font-size: 9.5vh;
		line-height: 8.2vh;
		width: 44vh;
	}
	
	#aboutbox {
		transform: translate(-20.6vh, 0%);
		top: 46vh;
	}
	
	#moinb2 {
		height: 35vh;
		transform: translate(-50%, -95%);
		border: 0.6vh solid #FEF7F1;
	}
	
	#moishade2 {
		position: absolute;
		height: 35vh;
		transform: translate(-50%, -91%);
		width: 100vw;
	}
	
	.aboutpara {
		font-size: 1.9vh;
		margin-top: 1vh;
		width: 41.3vh;
		line-height: 2.5vh;
	}
	
	#aboutpara3 {
		margin-bottom: 1.4vh;
	}
}

@media screen and (max-width: 980px){
	#contact {
		top: 38.9vh;
		font-size: 13.5vh;
		line-height: 11vh;
		width: 38.2vh;
	}

	#moinb {
		height: 35vh;
		transform: translate(-50%, -70%);
		border: 0.6vh solid #FEF7F1;
	}
	
	#moishade {
		position: absolute;
		height: 35vh;
		transform: translate(-50%, -68%);
		width: 100vw;
	}

	#contbox {
		transform: translate(-18.8vh, 0%);
		top: 50vh;
	}

	#ytinsta {
		display: block;
	}
	
	#mailcv {
		display: block;
	}

	.spacecont {
		width: 13vw;
		display: block;
		height: -1vh;
	}

	.reseaux span {
		font-size: 1.75vh;
	}
	
	.reseaux {
		font-size: 2.75vh;
		line-height: 2.4vh;
	}
}

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


	#homecont {
		display: block;
		margin: 0px;
		margin-left: 8vw;
		height: 75vh;
	}

	#right {
		height: 40vh;
		margin-left: auto;
		margin-right: auto;
		width: 84vw;
		margin-bottom: 8vh;
	}

	@keyframes updown {
		from {
			margin-top: 0px;
		}
	
		to {
			margin-top: 0px;
		}
	}

	#left {
		height: 29vh;
		width: 84vw;
		margin-top: 2vh;
	}

	#space {
		height: 2vh;
		width: 84vw;
	}

	#aboutmoi {
		margin-top: 18vh;
	}

	#moi {
		transform: translateX(-1.2%);
		margin-left: auto;
		margin-right: auto;
		width: 53vh;
		height: 100%;
		object-fit: cover;
		object-position: top;
	}

	#grand1 {
		margin-top: 13.5vh;
		left: 50%;
		transform: translateX(-50%);
		width: 52vh;
		height: 26.5vh;
	}
	
	#grand2 {
		margin-top: 13.5vh;
		left: 50%;
		transform: translateX(-50%);
		width: 52vh;
		height: 26.5vh;
	}

	#moyen {
		margin-top: 13.5vh;
		left: 50%;
		transform: translateX(-50%);
		width: 52vh;
		height: 3vh;
	}

	#shadow {
		opacity: 0;
		margin-top: 13.5vh;
		width: 52vh;
		height: 26.5vh;
	}

	#shadow2 {
		position: absolute;
		margin-top: 15.5vh;
		margin-left: 2vh;
		width: 52vh;
		height: 26.5vh;
		left: 50%;
		transform: translateX(-50%);
		background-color: black;
		outline-width: 0.55vh;
        outline-style: solid;
        outline-color: black;
	}

	#petit {
		right: 50%;
		transform: translateX(26vh);
		margin-top: 13.5vh;
	}

	#titre {
		margin-top: 2vh;
		font-size: 5.4vh;
		-webkit-text-stroke-width: 2px;
		line-height: 5.8vh;
		text-shadow: 5px 5px black;
		width: 40vh;
		margin-left: 50%;
		transform: translateX(-26vh);
	}

	#soustitre {
		font-size: 1.9vh;
		margin-top: 0vh;
		line-height: 2.3vh;
		margin-left: 50%;
		transform: translateX(-26vh);
		width: 50vh;	
	}

	#band2 {
		margin-top: 4vh; 
	}
	
}

@media screen and (max-width: 907px){
	#titre:after {
		font-size: 8.6vw;
		line-height: 10vw;
	}
	
}

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

	.photos {
		border-radius: 1.75vh;
	}

	.graphs {
		border-radius: 1.75vh;
	}

	.tds {
		border-radius: 1.75vh;
	}

	.videos {
		border-radius: 1.75vh;
	}

	.webdes {
		border-radius: 1.75vh;
	}

	#moi {
		transform: translateX(0%);
		width: 84vw;
		margin-left: 0px;
		margin-right: 0px;
	}

	#grand1 {
		width: 84vw;
	}
	
	#grand2 {
		width: 84vw;
	}

	#moyen {
		width: 84vw;

	}

	#shadow {
		opacity: 1;
		left: 8vw;
		width: 84vw;
	}

	#shadow2 {
		opacity: 0;
		display: none;
	}

	#petit {
		position: absolute;
		right: 8vw;
		margin-top: 13.5vh;
		transform: translateX(0vh);
	}

	#titre {
		margin-left: 0%;
		transform: translateX(0vh);
	}

	#soustitre {
		margin-left: 0%;
		transform: translateX(0vh);
		width: auto;
		height: auto;
	}

	#left {
		height: 30vh;
	}

	.images1 {
		display: block;
		height: auto;
	}

	.photos {
		display: block;
		width: 84vw;
		height: 105vw;
		margin-bottom: 8vw;
	}

	.images2 {
		display: block;
		height: auto;
	}

	.images5 {
		display: block;
		height: auto;
	}

	.graphs {
		display: block;
		width: 84vw;
		height: 84vw;
		margin-bottom: 8vw;
	}

	.tds {
		display: block;
		width: 84vw;
		height: 84vw;
		margin-bottom: 8vw;
	}

	.images3 {
		display: block;
		height: auto;
	}

	.videos {
		display: block;
		width: 84vw;
		height: 47.25vw;
		margin-bottom: 8vw;
	}

	.images4 {
		display: block;
		height: auto;
	}

	.webdes {
		display: block;
		width: 84vw;
		height: 47.25vw;
		margin-bottom: 8vw;
	}
	
}

@media screen and (max-width: 825px){
	.titrediv{
		font-size: 5.5vh;
		width: 84vw;
		margin-top: 6.25vh;
	}

	#titrediv{
		font-size: 5.5vh;
		width: 84vw;
		margin-top: 6.25vh;
	}

	#arrow1 {
		height: 5vh;
		margin-top: -12vh;
	}

	#arrow2 {
		height: 5vh;
		margin-top: -12vh;
	}

	#arrow3 {
		height: 5vh;
		margin-top: -12vh;
	}

	#arrow4 {
		height: 5vh;
		margin-top: -12vh;
	}

	#arrow5 {
		height: 5vh;
		margin-top: -12vh;
	}
}

@media screen and (max-width: 550px){
	#titrediv{
		font-size: 5.5vh;
		width: 60vw;
		margin-top: 3vh;
	}

	#arrow4 {
		height: 5vh;
		margin-top: -15vh;
	}
}


@media (max-aspect-ratio: 4/5) {
	#modalimg {
		height: auto;
		width: 90vw;
		top: 50vh;
		transform: translate(-50%, -50%);
		margin-top: 0px;
	}
  }

@media (max-aspect-ratio: 1/1) {
	#modalimg2 {
		height: auto;
		width: 90vw;
		top: 50vh;
		transform: translate(-50%, -50%);
		margin-top: 0px;
	}
	
  }

  @media (max-aspect-ratio: 16/9) {
	iframe {
		height: 50.625vw;
		width: 90vw;
	}
	
  }
















a:link { text-decoration: none; }


a:visited { text-decoration: none; }


a:hover { text-decoration: none; }


a:active { text-decoration: none; }




@font-face {
    font-family: APPLEi;
    src: url(../ressources/APPLEi.ttf);
}

@font-face {
    font-family: MADETOMMYt;
    src: url(../ressources/MADETOMMYt.otf);
}

@font-face {
    font-family: montserrat;
    src: url(../ressources/Montserrat.ttf);
}

@font-face {
    font-family: APPLEr;
    src: url(../ressources/APPLEr.ttf);
}

@font-face {
    font-family: MADETOMMYr;
    src: url(../ressources/MADETOMMYr.otf);
}

@font-face {
    font-family: MADETOMMYm;
    src: url(../ressources/MADETOMMYm.otf);
}

@font-face {
    font-family: MADETOMMYb;
    src: url(../ressources/MADETOMMYb.otf);
}

@font-face {
    font-family: PHONK;
    src: url(../ressources/PHONK.otf);
}