@font-face {
	font-family: Kanit;
	src: url(../fonts/Kanit-Bold.ttf);}
@font-face {
	font-family: Roboto;
	src: url(../fonts/Roboto-Regular.ttf);}
@font-face {
	font-family: Ubuntu;
	src: url(../fonts/Ubuntu-Medium.ttf);}
@font-face {
	font-family: Maguntia;
	src: url(../fonts/UnifrakturMaguntia-Book.ttf);}
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
html{scroll-behavior: smooth;}
body {margin: 0;box-sizing: border-box;padding: 0;}
h2 {font-family: 'Ubuntu', sans-serif;}
p {font-family: 'Roboto', sans-serif;}
/*------------------------------JORGE----------------------------------------*/
.header {min-height: 100vh;}
h1 {position: relative;}
h1::before {position: absolute;	content: '';top: 100%;height: 5px;width: 100%;background-color: #fbdd00;}
.nav {display: flex;position: fixed;width: 100%;background-color: black;align-items: center;justify-content: space-between;min-height: 6vh;z-index: 6;}
.boxMain {display: flex;min-height: 90vh;flex-direction: column;}
.headerTitle {display: flex;width: 100%;margin: 110px 0px 0px 0px;align-items: center;}
.tittle {font-family: 'Ubuntu', sans-serif;margin-left: 40px;font-size: 3em;}
#img {max-width: 250px;}
#alert{top: calc(50% - 150px);position: fixed;left: calc(50% - 300px);background: rgba(0, 0, 0, 0.986);color: white;width: 600px;height: auto;min-height: 300px;
	display: flex;align-items: flex-end;justify-content: start;	flex-direction: column;}
#alert >  h2{width: 100%;text-align: center;}
#alert >  ul{width: 100%;text-align: center;font-family: 'Roboto', sans-serif;}
#alert > img{width: 30px;height: 40px;margin: 10px;}
.menu {margin-right: 60px;}
.boxMorbius {background-color: black;color: white;width: 100%;height: 100px;align-items: center;display: flex;margin: 20px 0px 30px 0px;}
#morbius {font-size: 4.375em;margin: 0px 0px 0px 40px;}
#mobileNavArea > a {color: white;font-family: 'Ubuntu', sans-serif;text-decoration: none;margin: 20px;font-size: 1.2em;}
#menu > a:hover {color: #fbdd00;transition: all 0.3s ease;}
#menu > a {color: white;font-family: 'Ubuntu', sans-serif;text-decoration: none;margin: 20px;font-size: 1.2em;}
.boxTeaser {display: flex;justify-content: center;width: 100%;margin: 30px 0px;}
.boxVideo {display: flex;justify-content: center;width: 60%;}
.boxText {display: flex;align-items: flex-start;justify-content: center;flex-direction: column;	width: 50%;}
.boxText h2 {font-size: 1.875em;}
.boxText p {width: 70%;font-size: 1.5em;text-align: justify;}
.boxImg {margin-left: 10px;}
.petitCarre {margin-left: 10px;width: 40px;height: 40px;}
.youtube {width: 90%;height: 500px;}
/*            SECTION 1    JORGE               */
#popular {max-width: 100%;min-height: 100vh;align-items: center;display: flex;flex-direction: column;}
.section {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}
/*-***********************************PC WIDTH 1440px height 900px****************************************-*/
/*Titres: Section1 Film Populaire / Section 2 Film derniers sortis / Section 3 Films à venir */
.titleSection,.titleSection2,.titleSection3 {position: relative;width: 100%;margin: 0px 0px 70px 0px;display: flex;}
.h2Section,.h2Section2,.h2Section3 {font-size: 3em;margin: 0px 0px 0px 10px;}
.titleSection::before {position: absolute;content: '';background: #fbdd00;width: 500px;height: 100%;z-index: -1;transform: skew(-60deg);left: calc(54% - 50%);}
.h2Section2::before {position: absolute;content: '';background: #fbdd00;width: 500px;height: 100%;z-index: -1;	transform: skew(-60deg);left: calc(54% - 50%);}
.h2Section3::before {position: absolute;content: '';background: #fbdd00;width: 500px;height: 100%;z-index: -1;	transform: skew(-60deg);left: calc(54% - 50%);}
/*Icon Film-*/
.boxImgS,.boxImgS2,.boxImgS3 {margin-top: 10px;	max-width: 38px;height: 38px;margin-left: 105px;}
/*-*****************Carrousel section1 Jorge /section2 Laeti / Section3 Chris******************************-*/
.mySlider,.mySlider2,.mySlider3 {width: 91%;margin-left: 0px;margin-right: 0px;}
/*-****cartes****-*/
.cartes,.cartes2,.cartes3 {width: 30%;}
#cartes > .tns-item {margin-left: 0px;font-size: 0px;padding-left: 30px;}
#cartes2 > .tns-item {margin-left: 0px;font-size: 0px;padding-left: 30px;}
#cartes3 > .tns-item {margin-left: 0px;	font-size: 0px;	padding-left: 30px;}
#cartes-mw {margin-left: -20px;	padding: 25px;}
#cartes2-mw {margin-left: -20px;padding: 25px;}
#cartes3-mw {margin-left: -20px;padding: 25px;}
#cartes > div > img {width: 200px;height: 300px;}
#cartes2 > div > img {width: 200px;	height: 300px;}
#cartes3 > div > img {width: 200px;	height: 300px;}
.card {margin-bottom: 20px;	cursor: pointer;}
.card h2 {margin: 0px;font-size: 1.2rem;}
.card-body {display: flex;filter: drop-shadow(0px 4px 2px #404040);background-color: white;margin: 0px;width: 200px;height: 50px;align-items: center;	justify-content: center;}
.card-body h2 {text-align: center;font-size: 0.95rem;font-weight: 100;}
/*-****Fléches****-*/
button {background-color: transparent;border: 0px;}
.controls,.controls2,.controls3 {margin: 0;	padding: 0;	position: absolute;	width: 97%;	transform: translatey(50%);	display: flex;align-items: center;justify-content: space-between;}
.controls1,.controls2,.controls3:focus {outline: none;}
.rightArrow,.rightArrow2,.rightArrow3,.leftArrow,.leftArrow2,.leftArrow3 {font-family: 'Maguntia', cursive;	font-size: 7rem;cursor: pointer;width: 100%;height: 50%;}
#leftBoton, #leftBoton2, #leftBoton3, #rightBoton, #rightBoton2, #rightBoton3{left: 0;opacity: 1;transition: all 0.3s ease;}
/*NAV PORTABLE JORGE*/
.none {display: none !important;}
.openNav {height: 300px !important;}
.bars {display: none;width: 30px;cursor: pointer;margin-right: 30px;z-index: 50;}
#closeNav {width: 20px;	cursor: pointer;margin-right: 30px;	z-index: 50;}
#mobileNavArea {overflow: hidden;position: fixed;width: 100%;z-index: 5;height: 0px;background: black;	color: white;flex-direction: column;display: flex;	justify-content: end;
	align-items: center;transition: all 0.2s ease 0s;}
/* FIN NAV PORTABLE JORGE*/
.modal {position: fixed;width: 50%;	z-index: 56;min-height: 0vh;max-height: 100vh;top: 0%;	left: 0%;bottom: 0%;right: 0%;background: black;color: white;	display: flex;
	transition: all 1s ease 0s;	flex-direction: row-reverse;}
.modaleContainer {display: flex;width: 100%;flex-direction: column;	align-items: flex-start;justify-content: center;text-align: start;min-height: 100vh;}
.boxTitleImg {width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: row-reverse;}
.closeModaleBtn {position: absolute;width: 20px;margin: 20px;cursor: pointer;}
.modaleContainer2 {min-height: 100vh;display: flex;flex-direction: row;justify-content: center;	align-items: center;flex-wrap: wrap;width: 100%;}
.modaleText {height: 20%;}
.modaleText > h2 {position: relative;font-size: 1.5vw;}
.modaleText > p {font-size: 0.9vw;text-align: justify;}
.imgModale {width: 50%;display: flex;align-items: center;justify-content: center;}
.imgModale img {width: 12vw;}
.modaleText {width: 50%;}
.synopsisBox {width: 100%;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}
.synopsisBox > p {width: 80%;font-size: 0.8vw;text-align: justify;}
.modalVideo {width: 100%;display: flex;	justify-content: center;flex-wrap: wrap;}
.modalVideo > h2, .synopsisBox > h2 {width: 80%;position: relative;font-size: 1.5vw;}
.modalVideo iframe {width: 80%;	height: 300px;}
.modalVideo > h2::first-letter, .synopsisBox > h2::first-letter, .modaleText > h2::first-letter {color: #fbdd00;}
.modalVideo > h2::before, .synopsisBox > h2::before, .modaleText > h2::before {position: absolute;content: '';top: 100%;	height: 1px;width: 80%;	background-color: rgb(251, 221, 0);}
/*   FIN  MODAL JORGE        */
/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/*                   DEBUT CHRIS   PARTIE SECTION 3 FILM A VENIR -CHRIS -PC              */
#upcoming {max-width: 100%;	min-height: 100vh;align-items: center;display: flex;flex-direction: column;}
/*-******************Partie section 4  Bande Annonce - CHRIS - PC**********-*/
#bandeFilm {width: 100%;min-height: 100vh;display: flex;align-items: flex-start;justify-content: center;flex-direction: column;}
#boxBandeFilm {width: 100%;background: #000000;display: flex;align-items: center;justify-content: center;flex-direction: column;margin-top: 100px;}
#boxBande1, #boxBande2 {width: 100%;display: flex;align-items: center;justify-content: flex-start;flex-direction: row;}
#boxBande1 > .bande1, #boxBande2 > .bande2{color: white;font-family: Ubuntu; margin-left: 40px;}
#boxBande1 > .bande1 {font-size: 3.125em;margin-bottom: -32px;}
#boxBande2 > .bande2 {font-size: 2.5em;}
.boxCarreJaune {width: 100%;display: flex;align-items: center;justify-content: flex-end;flex-direction: row;}
#petitCarre3 {position: relative;margin-left: 20px;width: 80px;	height: 80px;transform: rotate(90deg);	margin-top: -80px;}
#boxBandeH3 {width: 100%;display: flex;align-items: flex-start;	justify-content: flex-start;flex-direction: column;}
#boxBandeH3 > .bandeH3 {font-family: Roboto;font-size: 1.563em;margin-left: 40px;margin-top: 75px;}
.boxYoutube {width: 100%;height: 60vh;}
.youtube2 {width: 100%;	height: 100%;}
/*     FIN CHRIS    */
/*---------------------------------------------------------------------------------------------------------------------------*/
/* LAETITIA */
/*-************************************Début du carousel films derniers sortis **********************/
#nowPlaying {max-width: 100%;min-height: 100vh;	align-items: center;display: flex;flex-direction: column;}
/*-******** Début du Footer********/
#Footer {width: 100%;display: flex;align-items: center;	justify-content: center;background-color: black;}
#boxFooter {width: 100%;display: flex;flex-direction: column;}
#boxContainer {width: 100%;	display: flex;}
/*-********Box Liens réseaux sociaux********/
#boxLiensreseauxsociaux {width: 50%;display: flex;flex-direction: column;align-items: center;justify-content: center;border-bottom-style: inset;border-right-style: inset;
	border-bottom-width: thin;border-right-width: thin;border-color: #c4c4c480;}
#boxLiensreseauxsociaux > #boxTitle {width: 100%;height: 12vh;display: flex;align-items: center;justify-content: center;}
#boxLiensreseauxsociaux > #boxTitle > #titleFollow {color: white;text-decoration: underline;text-decoration-color: #c4c4c480;font-size: 1.56rem;font-family: Ubuntu;
	font-weight: 500;margin: 65px 10px 30px 10px;}
/*-********Box Icone********/
#boxLiensreseauxsociaux > #boxIcone {width: 90%;height: 7vh;display: flex;align-items: center;justify-content: space-between;margin: 52px 0px 23px 0px;}
/*-********Facebook********/
#boxLiensreseauxsociaux > #boxIcone > #iconeFacebook > a {padding: 10px 10px;}
/*-********Twitter********/
#boxLiensreseauxsociaux > #boxIcone > #iconeTwitter > a {padding: 17px 10px;}
#boxLiensreseauxsociaux > #boxIcone > #iconeInstagram > a {padding: 15px 10px;}
/*-********Instagram********/
#boxLiensreseauxsociaux > #boxIcone > #iconeFacebook, #boxLiensreseauxsociaux > #boxIcone > #iconeTwitter, #boxLiensreseauxsociaux > #boxIcone > #iconeInstagram {width: 30%;display: flex;justify-content: center;}
#boxLiensreseauxsociaux > #boxIcone > #iconeFacebook > img.lienFacebook, #boxLiensreseauxsociaux > #boxIcone > #iconeTwitter > img.lienTwitter, #boxLiensreseauxsociaux > #boxIcone > #iconeInstagram > img.lienInstagram {width: 35px;height: 25px;}
#boxLiensreseauxsociaux > #boxIcone > #iconeFacebook > a, #boxLiensreseauxsociaux > #boxIcone > #iconeTwitter > a, #boxLiensreseauxsociaux > #boxIcone > #iconeInstagram > a {background-color: white;border-radius: 50%;width: 35px;display: flex;justify-content: center;
cursor: pointer;}
/*-********Box Entreprise********/
#boxEntreprise {width: 100%;}
#boxEntreprise > #boxLogo {width: 100%;	display: flex;align-items: center;justify-content: center;}
#boxEntreprise > #boxParagrapheentreprise {width: 60%;text-align: center;color: white;font-size: 0.75rem;font-family: Roboto;font-weight: 400;	line-height: 14.06px;}
#boxEntreprise > #boxParagrapheentreprise > p {margin: -29px 0px 20px 0px;font-size: 1.1rem;line-height: 23px;}
/*-********Box Adresse********/
#boxAdresse {width: 50%}
#boxEntreprise,#boxAdresse {display: flex;justify-content: center;align-items: center;flex-direction: column;border-bottom-style: inset;border-right-style: inset;
border-bottom-width: thin;border-right-width: thin;	border-color: #c4c4c480;}
#boxAdresse > #boxTittle {width: 100%;height: 12vh;display: flex;align-items: center;justify-content: center;}
#boxAdresse > #boxTittle > #titleAdress {color: white;text-decoration: underline;text-decoration-color: #c4c4c480;font-size: 1.56rem;	font-family: Ubuntu;font-weight: 500;
margin: 0px;height: 11vh;}
#boxAdresse > #boxParagrapheadresse {width: 100%;display: flex;align-items: center;justify-content: center;	flex-direction: column;	margin: 7px 0px -22px 0px;}
#boxAdresse > #boxParagrapheadresse > #paragrapheAdresse, #boxAdresse > #boxParagrapheadresse > #paragrapheAdresse2 {text-align: center;color: white;font-size: 1.1rem;	font-family: Roboto;font-weight: 400;margin: 0px 0px 0px 0px;}
#boxAdresse > #boxParagrapheadresse > #paragrapheAdresse1 {	width: 40%;line-height: 14.06px;}
#boxAdresse > #boxParagrapheadresse > #paragrapheAdresse2 {line-height: 25.06px;}
/*-********Box Information********/
#boxInformation {width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;margin: 20px 0px 20px 0px;}
/*-********Box Ligne 1********/
#boxInformation > #boxLigne1 {margin: 0px;}
#boxInformation > #boxLigne1 > #infosOne {color: white;font-family: 'Ubuntu', sans-serif;font-weight: 500;	margin: 0px;display: flex;align-items: center;}

#boxInformation > #boxLigne1 > #infosOne > a.lienInfosone {cursor: pointer;	margin: 0px 0px 0px 0px;font-size: 14px;}
#boxInformation > #boxLigne1 > #infosOne > a.lienInfosone > span.lettreA {color: #fbdd00;}
#boxInformation	> #boxLigne1> #infosOne	> a.lienInfosone> span.lettreA > a.infosTwo {color: white;	margin: 0px;font-size: 14px;}
#boxInformation	> #boxLigne1 > #infosOne> #copyRight> #infosThree> span.lettreA2 {color: #fbdd00;font-size: 14px;}
#boxInformation	> #boxLigne1 > #infosOne > #copyRight > #infosThree	> span.lettreA2	> span.infosFour {color: white;}
/*-********Box Ligne 2*******-*/
#boxInformation > #boxLigne2 {margin: 0px;display: flex;align-items: center;}
#boxInformation > #boxLigne2 > #infosFive {color: white;font-family: 'Ubuntu', sans-serif;font-weight: 500;margin: 0px;font-size: 14px;}
#boxInformation > #boxLigne2 > #infosFive > p {font-size: 1.56rem;}
#boxInformation > #boxLigne2 > #infosFive > span.lettreA3 {color: #fbdd00;margin: 5px;}
#boxInformation > #boxLigne2 > #infosFive > span.lettreA3 > span.infosSix {color: white;}
#boxInformation > #boxLigne2 > #infosSeven > a.numéro {color: #fbdd00;font-family: Roboto;font-weight: 500;margin: 0px 15px;cursor: pointer;font-size: 14px;}
#boxInformation > #boxLigne2 > #infosHeight {color: white;font-family: Roboto;font-weight: 500;margin: 0px 0px;font-size: 14px;}
#boxInformation > #boxLigne2 > #infosHeight > p {font-size: 1.56rem;}
/*-********Box Ligne 3*******-*/
#boxInformation > #boxLigne3 {margin: 0px;display: flex;align-items: center;}
#boxInformation > #boxLigne3 > p.infosNine {color: white;font-family: Roboto;font-weight: 500;font-size: 14px;}
#boxInformation > #boxLigne3 > p.infosNine > a.infosTen {color: #fbdd00;font-family: Roboto;font-weight: 500;cursor: pointer;}
#infosTen, #boxLiensreseauxsociaux > #boxIcone > #iconeFacebook > a, #boxLiensreseauxsociaux > #boxIcone > #iconeTwitter > a, #boxLiensreseauxsociaux > #boxIcone > #iconeInstagram > a  {margin: 0px;}
/*-*****************************************Fin du Footer **************************-*/
/* MEDIA QUERY ICI*/
/*-***Media query- Tablette***-*/
@media screen and (max-width: 1024px) {
	.bars {display: block;}
	#alert{top: calc(50% - 150px);left: calc(50% - 200px);width: 400px;}
	.tittle {font-size: 2.375em;margin-top: 25px;margin-left: 25px;}
	.menu {display: none;}
	#img {max-width: 250px;	margin-left: -15px;}
	.boxMorbius {width: 100%;height: 64px;}
	#morbius {font-size: 3.125em;margin-left: 20px;}
	.boxText h2 {display: block;font-size: 1.6em;margin-left: 10px;}
	.boxText p {width: 100%;display: block;	font-size: 1.3em;margin: 10px;text-align: justify;}
	#morbiusText {width: auto;height: auto;}
	.boxVideo {margin-left: 20px;}
	.youtube {width: 100%;height: 100%;}
	#popular, #nowPlaying, #upcoming {max-width: 100%;	}
	#popular, .header{min-height: 80vh;}
	#nowPlaying, .boxMain {min-height: 75vh;}
	#upcoming {min-height: 40vh;}
	.h2Section, .h2Section2,.h2Section3 {font-size: 1.875em;margin: 10px 0px 0px 10px;}
	.titleSection::before {width: 340px;height: 32px;left: calc(56% - 50%);}
	.titleSection::before{margin-top: 11px;}
	.h2Section3::before, .h2Section2::before {margin-top: 2px;}
	/*Icon Film-*/
	.boxImgS, .boxImgS2, .boxImgS3{margin-top: 15px;max-width: 25px;height: 25px;}
	.boxImgS,.boxImgS2 {margin-left: 102px;}
	.boxImgS3 {margin-left: 97px;}
	/*-****cartes****-*/
	.mySlider, .mySlider2, .mySlider3{width: 90%;}
	#cartes > .tns-item, #cartes2 > .tns-item, #cartes3 > .tns-item{margin-left: 5px;font-size: 0px;padding-left: 0px;}
	#cartes-mw, #cartes2-mw, #cartes3-mw {margin-left: -3px;padding: 18px;margin-top: 0px;}
	#cartes > div > img, #cartes2 > div > img, #cartes3 > div > img  {width: 150px;	height: 220px;}
	.card h2 {margin: 0px;}
	.card-body {margin: 0px;width: 150px;height: 35px;}
	.card-body h2 {text-align: center;font-size: 0.6rem;font-weight: 100;}
	/*-****Fléches****-*/
	.controls,.controls2,.controls3 {width: 97%;z-index: 2;margin-left: 0px;}
	button {background-color: transparent;border: 0px;}
	/*-****section bande annonce****/
	#boxBandeFilm {width: 100%;}
	#boxBande1 > .bande1 {margin-left: 20px;margin-top: 15px;font-weight: 100;}
	#boxBande1 > .bande1 {font-size: 1.9em;}
	#boxBande2 > .bande2 {font-size: 1.7em;}
	#petitCarre3 {margin-top: -40px;width: 40px;height: 40px;}
	#boxBandeH3 > .bandeH3 {font-size: 1.3em;margin-left: 20px;}
	.boxYoutube {width: 100%;height: 67vh;}
	.youtube2 {width: 100%;}
	/*Laetitia*/
	#boxLiensreseauxsociaux > #boxTitle > #titleFollow {margin: 28px 8px 30px 10px;}
	#boxLiensreseauxsociaux > #boxIcone {margin: 29px -69px 0px -74px;}
	#boxEntreprise > #boxParagrapheentreprise > p {margin: 1px -50px 23px -41px;font-size: 15px;}
	#boxAdresse > #boxTittle > #titleAdress {margin: 130px 8px 24px 5px;}
	#boxAdresse > #boxParagrapheadresse {margin: 57px 0px 31px 0px;}
	#boxAdresse > #boxParagrapheadresse > #paragrapheAdresse {width: 100%;font-size: 15px;}
	#boxAdresse > #boxParagrapheadresse > #paragrapheAdresse2 {font-size: 15px;}
	#boxInformation > #boxLigne1 > #infosOne > a.lienInfosone {margin: 0px;font-size: 15px;}
	#boxInformation	> #boxLigne1> #infosOne	> a.lienInfosone > span.lettreA	> a.infosTwo, #boxInformation > #boxLigne1	> #infosOne	> #copyRight> #infosThree> span.lettreA2, #boxInformation > #boxLigne2 > #infosFive, #boxInformation > #boxLigne2 > #infosSeven > a.numéro, #boxInformation > #boxLigne2 > #infosHeight, #boxInformation > #boxLigne3 > p.infosNine {font-size: 15px;}
	#infosTen {margin: 0px;}
	/* MODAL*/
	.modaleContainer2 {min-height: 100vh;}
	.boxTitleImg {width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}
	.modaleText {width: 50%;margin-left: 22px;}
	.imgModale img {width: 20vw;margin-top: 25px;margin-left: 0px;}
	.modaleText > h2 {position: relative;font-size: 2.5vw;margin-left: -86px;}
	.modaleText > p {font-size: 1.5vw;margin-top: 15px;	margin-left: -86px;}
	.synopsisBox > h2 {position: relative;width: 80%;font-size: 2vw;}
	.synopsisBox > p {width: 80%;font-size: 1.3vw;text-align: justify;}
	.modalVideo > h2 {width: 80%;position: relative;font-size: 2vw;}
	.modalVideo iframe {width: 80%;height: 255px;}}
@media screen and (max-width: 800px) {
	.bars {display: block;}
	.tittle {font-size: 2em;margin-top: 20px;margin-left: 20px;}
	.h2Section, .h2Section2,.h2Section3  {font-size: 1.875em;margin: 10px 0px 0px 10px;}
	/*-****Fléches****-*/
	.controls,.controls2,.controls3 {justify-content: end;transform: translatey(-110%);}
	#boxBande1 > .bande1, #boxBande2 > .bande2 {margin-left: 20px;font-weight: 100;}
	#boxBande1 > .bande1 {font-size: 1.9em;}
	#boxBande2 > .bande2 {font-size: 1.7em;}
	#petitCarre3 {width: 40px;height: 40px;}
	#boxBandeH3 > .bandeH3 {font-size: 1.3em;margin-left: 20px;}
	/*Laetitia*/
	#boxLiensreseauxsociaux {width: 25%;}
	#boxLiensreseauxsociaux > #boxIcone > #iconeTwitter > a {padding: 15px;}
	#boxLiensreseauxsociaux > #boxIcone > #iconeInstagram > a {padding: 14px;}
	#boxLiensreseauxsociaux > #boxIcone {margin: 26px 0px 11px 0px;}
	#boxAdresse {width: 25%;flex-direction: column;}
	#boxAdresse > #boxTittle > #titleAdress {margin: 103px 8px 31px 5px;}
	#boxAdresse > #boxParagrapheadresse {margin: 28px 0px -8px 0px;}
	#boxAdresse > #boxParagrapheadresse > #paragrapheAdresse {width: 100%;font-size: 13px;}
	#boxAdresse > #boxParagrapheadresse > #paragrapheAdresse2 {font-size: 13px;}
	#boxEntreprise {width: 50%;}
	#logoFooter {width: 80%;}
	#boxEntreprise > #boxParagrapheentreprise > p {margin: -31px -52px 26px -44px;font-size: 15px;line-height: 20px;}
	#boxInformation > #boxLigne1 > #infosOne > a.lienInfosone {margin: 0px;font-size: 13px;}
	#boxInformation	> #boxLigne1 > #infosOne > a.lienInfosone > span.lettreA > a.infosTwo, #boxInformation	> #boxLigne1 > #infosOne > #copyRight > #infosThree	> span.lettreA2, #boxInformation > #boxLigne2 > #infosFive, #boxInformation > #boxLigne2 > #infosSeven > a.numéro, #boxInformation > #boxLigne2 > #infosHeight, #boxInformation > #boxLigne3 > p.infosNine {font-size: 13px;}
	/*modal media query */
	.modaleContainer2 {min-height: 100vh;}
	.boxTitleImg {width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}
	.modaleText {width: 50%;margin-left: 22px;}
	.imgModale img {width: 20vw;margin-top: 25px;margin-left: 0px;}
	.modaleText > h2 {position: relative;font-size: 2.5vw;margin-left: -70px;}
	.modaleText > p {font-size: 1.5vw;margin-top: 15px;margin-left: -70px;}
	.synopsisBox > h2 {position: relative;width: 80%;font-size: 2vw;}
	.synopsisBox > p {width: 80%;font-size: 1.3vw;text-align: justify;}
	.modalVideo > h2 {width: 80%;position: relative;font-size: 2vw;}
	.modalVideo iframe {width: 80%;height: 255px;}}
@media screen and (max-width: 650px) {
	#img {width: 173px;margin-left: -10px;}
	.tittle {font-size: 1.2em;margin-top: 0px;margin-left: 20px;}
	.petitCarre {margin-left: 10px;width: 20px;height: 20px;margin-top: -10px;}
	#morbius {font-size: 2em;font-weight: 400;margin-left: 20px;}
	.boxText {margin-left: 10px;width: 40%;}
	.boxText h2 {display: block;font-size: 1.1em;}
	.boxText p {font-size: 0.8em;}
	.boxVideo {width: 40%;}
	.titleSection::before, .h2Section2::before, .h2Section3::before{width: 340px;height: 32px;left: calc(56% - 50%);}
	.titleSection::before{margin-top: 11px;}
	.h2Section2::before, .h2Section3::before {margin-top: 2px;}
	/*Icon Film-*/
	.boxImgS,.boxImgS2,.boxImgS3 {margin-top: 17px;max-width: 22px;height: 22px;margin-left: 64px;}
	/*-****cartes****-*/
	#cartes > div > img, #cartes2 > div > img, #cartes3 > div > img {width: 120px;height: 180px;}
	.card h2 {margin: 0px;}
	.card-body {margin: 0px;width: 120px;height: 55px;}
	.card-body h2 {text-align: center;font-size: 0.6rem;font-weight: 100;}
	/*-****Fléches****-*/
	.controls, .controls2, .controls3 {width:90%; margin-left: 0px;}
	button {background-color: transparent;border: 0px;}
	/*-****section bande annonce****/
	#boxBandeFilm {width: 100%;}
	#boxBande1 > .bande1, #boxBande2 > .bande2 {margin-left: 20px;margin-top: 15px;font-weight: 100;}
	#boxBande1 > .bande1{font-size: 1.9em;}
	#boxBande2 > .bande2 {font-size: 1.7em;}
	#petitCarre3 {width: 40px;height: 40px;}
	#boxBandeH3 > .bandeH3 {font-size: 1.3em;margin-left: 20px;}
	.boxYoutube {margin-left: 0px;}
	.boxYoutube, .youtube2 {width: 100%;}
	/*Laetitia*/
	#boxContainer {flex-direction: column;}
	#boxLiensreseauxsociaux {width: 100%;display: flex;flex-direction: column;}
	#boxLiensreseauxsociaux > #boxIcone > #iconeFacebook > a {padding: 10px 11px;}
	#boxLiensreseauxsociaux > #boxIcone > #iconeTwitter > a {padding: 16px 12px;}
	#boxLiensreseauxsociaux > #boxIcone > #iconeInstagram > a {padding: 14px 11px;}
	#boxLiensreseauxsociaux > #boxIcone {margin-bottom: 20px;width: 70%;}
	#boxAdresse {width: 100%;display: flex;}
	#boxAdresse > #boxTittle > #titleAdress {margin: 69px 8px 31px 5px;}
	#boxAdresse > #boxParagrapheadresse {margin: -25px 0px 20px 0px;}
	#boxAdresse > #boxParagrapheadresse > #paragrapheAdresse {width: 100%;font-size: 14px;}
	#boxAdresse, #boxEntreprise {width: 100%;}
	#boxEntreprise > #boxLogo {width: 80%;}
	#boxEntreprise > #boxParagrapheentreprise > p {	margin: 0px -50px 20px -44px;font-size: 15px;}
	#boxInformation > #boxLigne1 > #infosOne {flex-direction: column;text-align: center;margin: 10px 8px 10px 8px;}
	#boxInformation > #boxLigne1 > #infosOne > #copyRight {margin: 10px 0px 0px 0px;}
	#boxInformation > #boxLigne1 > #infosOne > a.lienInfosone {	margin: 0px;font-size: 14px;}
	#boxInformation	> #boxLigne1 > #infosOne > a.lienInfosone > span.lettreA > a.infosTwo {	font-size: 14px;}
	#boxInformation	> #boxLigne1 > #infosOne > #copyRight > #infosThree	> span.lettreA2 {font-size: 14px;}
	#boxInformation > #boxLigne2 {display: flex;flex-direction: column;	text-align: center;	margin: 10px 8px 10px 8px;	}
	#boxInformation > #boxLigne2 > #infosSeven {margin: 10px 0px 10px 0px;}
	#boxInformation > #boxLigne2 > #infosFive, #boxInformation > #boxLigne3 > p.infosNine, #boxInformation > #boxLigne2 > #infosHeight ,#boxInformation > #boxLigne2 > #infosSeven > a.numéro {font-size: 14px;}
	.titleSection::before {height: 25px;top: -10px;}
	/*modal media query */
	.modaleContainer2 {min-height: 100vh;}
	.boxTitleImg {width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}
	.modaleText {width: 50%;margin-left: 22px;}
	.imgModale img {width: 20vw;margin-top: 25px;margin-left: -136px;}
	.modaleText > h2 {position: relative;font-size: 2vw;margin-left: -62px;}
	.modaleText > p {font-size: 1.5vw;margin-top: 15px;margin-left: -62px;}
	.synopsisBox > h2 {position: relative;width: 80%;font-size: 2vw;}
	.synopsisBox > p {width: 80%;font-size: 1vw;text-align: justify;}
	.modalVideo > h2 {width: 80%;position: relative;font-size: 2vw;}
	.modalVideo iframe {width: 80%;height: 255px;}
	.synopsisBox > p {font-size: 1.3vw;}}
/*fin modal media query*/
/*-***Media query- Mobile***-*/
@media screen and (max-width: 500px) {
	.nav {min-height: 6vh;}
	#alert{top: calc(50% - 150px);left: calc(50% - 150px);width: 300px;}
	.header {min-height: 25vh;}
	#boxMain {min-height: inherit;}
	#img {width: 173px;	margin-left: -10px;}
	#tittle {font-size: 1.1em;margin-top: 0px;margin-left: 20px;}
	.boxMorbius {height: 70px;}
	#morbius {font-size: 2.188em;font-weight: 100;margin-left: 20px;}
	.boxTeaser, .boxVideo {	width: 100%;}
	.boxVideo {margin-left: 0px;}
	.boxText, .boxText h2,.boxText p, .menu  {display: none;}
	.youtube {width: 100%;height: 280px;}
	.petitCarre {margin-left: 10px;width: 30px;height: 30px;margin-top: -35px;}
	#popular {align-items: center;display: flex;flex-direction: column;}
	#nowPlaying, #popular {max-width: 100%;min-height: 60vh;}
	#upcoming {max-width: 100%;min-height: 80vh;}
	.h2Section, .h2Section2, .h2Section3 {font-size: 1em;margin: 10px 0px 0px 10px;}
	.titleSection::before, .titleSection2::before, .titleSection3::before {width: 190px;height: 35px;left: calc(59% - 50%);}
	.h2Section2::before, .titleSection3::before{margin-top: -10px;}
	/*Icon Film-*/
	.boxImgS,.boxImgS2,.boxImgS3 {margin-top: 12px;	max-width: 15px;height: 15px;margin-left: 44px;}
	/*-****cartes****-*/
	.mySlider,.mySlider2,.mySlider3 {width: 70%;margin-left: 4px;}
	#cartes > .tns-item, #cartes2 > .tns-item, #cartes3 > .tns-item{margin-left: 0.5px;font-size: 0px;padding-left: 0px;}
	#cartes-mw, #cartes2-mw, #cartes3-mw {margin-left: -3px;padding: 10px;}
	#cartes > div > img, #cartes2 > div > img, #cartes3 > div > img{width: 120px;height: 180px;}
	.card h2 {margin: 0px;font-size: 0.7em;}
	.card-body h2 {text-align: center;font-size: 0.7rem;font-weight: 100;}
	/*-****Fléches****-*/
	.rightArrow,.rightArrow2,.rightArrow3,.leftArrow,.leftArrow2,.leftArrow3 {width: 80%;height: 40%;font-size: 6rem;}
	#leftBoton,#leftBoton2,#leftBoton3 {left: 0;opacity: 1;	}
	#rightBoton,#leftBoton2,#leftBoton3 {right: 0;opacity: 1;}
	/*-*****section bande annonce*-**********/
	#boxBandeFilm {width: 100%;height: 83px;margin-top: 100px;}
	#boxBande1 > .bande1,#boxBande2 > .bande2 {margin: 20px 0;/*margin-left: 20px; *//* margin-top: 20px; */}
	#boxBande1 > .bande1 {font-size: 1.25em;}
	#boxBande2 > .bande2 {font-size: 1em;}
	#petitCarre3 {margin-top: -40px;width: 40px;height: 40px;}
	#boxBandeH3 > .bandeH3 {font-size: 1em;	margin-left: 10px;}
	.boxYoutube {margin-left: 0px;}	
	.youtube2 {width: 100%;}
	/*modal media query */
	.modaleContainer2 {min-height: 90vh;}
	.boxTitleImg {width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}
	.modalVideo iframe {width: 80%;	height: 270px;}
	.modal {width: 100%;}
	.imgModale img {width: 30vw; margin: 0px 0px;/* margin-top: 0px; */	/* margin-left: 0px; */}
	.modaleText > h2 {font-size: 4vw;margin-left: -76px;}
	.modaleText > p {margin-left: -76px;}
	.synopsisBox > p, .modaleText > p  {font-size: 2.5vw;}
	.modalVideo > h2, .synopsisBox > h2 {font-size: 3.5vw;}}
/*fin modal media query*/
@media screen and (max-width: 390px) {
	.mySlider,.mySlider2,.mySlider3 {width: 60%;margin-left: 4px;}
	#cartes > div > img {width: 200px;height: 300px;}
	#cartes2 > div > img {width: 200px;height: 300px;}
	#cartes3 > div > img {width: 200px;height: 300px;}
	.card-body {margin: 0px;width: 200px;height: 55px;}
	.controls,.controls2,.controls3 {transform: translatey(-180%);}}
@media screen and (max-width: 375px) {
	.modaleText > h2 {font-size: 4.5vw;margin-left: -67px;}
	.modaleText > p {font-size: 2.5vw;margin-left: -67px;}
	.imgModale img {width: 35vw;margin-top: 0px;margin-left: 0px;}}