/*KEYFRAMES*/
@keyframes translationBackroundMobile {
	0% {transform: translateY(0) scale(1);}
	100% {transform: translateY(-25vH) scale(0.5);}
}
@keyframes translationBackroundDek {
	0% {transform: scale(1);top: 50%;}
	/*translateY(23.9848);*/
	100% {transform:scale(0.3);top: 4vH}
}
@keyframes Front {
	from {transform: perspective(2500px) rotateY(0deg);}
	to {transform: perspective(2500px) rotateY(90deg);}
}
@keyframes Back {
	from {transform: perspective(2500px) rotateY(-90deg);}
	to {display: fixed;	transform: perspective(2500px) rotateY(0deg);}
}
@keyframes LanguetteBasToPosition {
	from {transform: rotateX(0deg);}
	to {transform: rotateX(90deg);}
}
@keyframes LanguetteHautToPosition {
	from {transform: rotateX(90deg);}
	to {transform: rotateX(0deg);}
}
@keyframes SlideBottom {
	from {top:0;} 
	to {top: 200%;}
}
@keyframes MenuToBottom {
	from {transform: translateY(0);box-shadow: inherit;opacity: 0;} 
	to {transform: translateY(10vH);box-shadow: none;opacity: 1}
}
@keyframes fadeIn {
	from {opacity: 0;}
	to {opacity: 1;}
}
@keyframes fadeOut {
	from {opacity: 1;}
	to {opacity: 0;}
}
@keyframes wheelHueColor {
    0% {color: #d18919 ;transform: translateY(-40%);} 
    25% {transform: translateY(0);}
    50% {color: gray;transform: translateY(-40%);}
   	75% {transform: translateY(0);}
   	100% {color: #d18919;transform: translateY(-40%);}
}
body {
	/*background: url(ressources/enveloppe/test.jpg);
	background-repeat: no-repeat;
	background-size: 100%;*/
}
#backgroundPage {
	position: fixed;
	z-index: 0;
	top: 50%;
	left: 50%;
	height: calc(100vW / (1088/726));
	width: 100vW;
	margin-left: -50vW;
	margin-top: calc((-100vW / (1088/726))/2);
}
/* ANIMATION CLASS*/
.frontRotate {
	animation: Front linear 2s 1;
}
.backRotate {
	animation: Back linear 2s 1;
}
.languetteBasToPosition {
	animation: LanguetteBasToPosition linear 1s 1;
}
.languetteHautToPosition {
	animation: LanguetteHautToPosition linear 1s 1;
}
.slideBottom {
	animation: SlideBottom ease 1s 1;
}
.menuToBottom {
	animation: MenuToBottom ease 1s 1 forwards;
}
.fadeIn {
	animation: fadeIn ease 1s 1 forwards;
}
.fadeOut {
	animation: fadeOut ease 1s 1 forwards;
}
.translationBackground {
	animation: translationBackroundMobile ease 1s 1 forwards;
}
.animateMenu {
	box-shadow: none !important;
	transform: translateY(10vH);
}



/*POLICE */
@font-face {
  font-family: "Italianno";
  src: url("ressources/font/trajan/regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
}









/*CSS NORMAL*/

.bigText *, .bigText {
	font-size: calc((72vW / 12) / 2);
	font-family: "Italianno";
/*	font-family: "English 111 Vivace BT";
*/	/*font-family: 'Monsieur La Doulaise', cursive;*/
}
#welcomeText {
	font-size: calc((72vW / 12) / 2);
	margin-top: 10%;
	margin-bottom: 5%;
}
.notDisplay {
	display: none !important;
}
#accueil {
    position: fixed;
    height: calc(80vW/1.479);
    top: 50%;
    margin-top: calc((80vW/1.479)/-2);
    width: 80vW;
    left: 50%;
    margin-left: -40vW;
}
#accueil img {
	width: 80vW;
	height: calc(80vW/1.479);
}
#accueil div {
	position: absolute;
	width: 80vW;
	left: 50%;
	margin-left: -40vW;
}

#languetteHaut {
	top: calc(54.0906vW/-1.7978);
	transform-origin: bottom;
	transform: rotateX(0deg);
}
#languetteHaut img {
	height: calc(54.0906vW/1.7978);
}
#languetteBas {
	transform: rotateX(90deg);
	transform-origin: top;
}
#languetteBas img {
	height: calc(54.0906vW/1.7978);
}
#backCarte {
	display: none;
}

#contenerWelcome {
	display: flex;
	height: calc(80vW/1.479);
    top: 50%;
    position: absolute;
    margin-top: calc((80vW/1.479)/-2);
	flex-direction: column;
	justify-content: center;
	text-align: center;
}
#welcomeText {
	text-decoration: none;
	color: #d18919;
	font-weight: 600;
}
#clickButton {
	font-size: calc((72vW / 12) / 3.5);
    animation: wheelHueColor 2s infinite;
}
.frontCarteClosedShow {
	transform: rotateY(180deg);
}



/*Background*/
#backgroundImg {
	position: fixed;
	left: 50%;
	margin-left: -40vW;
	width: 80vW;
	top: 50%;
	margin-top: calc((80vW / 1.618)/-2);
	height: calc(80vW / 1.618);
}
#backgroundImg img {
	width: 80vW;
	height: calc(80vW / 1.618);
	background: white;
	border-radius: 47px;
}
.backgroundTop {
	transform: translateY(-25vH) scale(0.5);
}

/*MENUS */
#menus {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
    height: calc(80vW/1.479);
    top: 50%;
    margin-top: calc((80vW/1.479)/-2);
    width: 80vW;
    left: 50%;
    margin-left: -40vW;
    text-align: center;
}
#contenerMenuText {
	background: white;
	opacity: 0.7;
}
.contenerTextMenu {
	padding: 0px;
	border: 2px solid #a9a9a9;
	margin: 12px;
	box-shadow: 0 5px 15px rgba(169, 169, 169, 0.9);
}
.menuText {
	/*box-shadow: 0 5px 15px rgba(169, 169, 169, 0.9);*/
	margin: 11px;
	/*border: 1px solid #a9a9a9;*/
}
#menus span {
	color:#d18919;
	text-decoration: none;
	font-size: calc(((80vW / 1.618)/3)/2.275);
	font-family: "Italianno";
}
#menus a {
	text-decoration: none;
}
#menus span:hover {
	color: #a9a9a9;
}



/*FOOTER*/
footer {
	color: #656565;
	position:fixed;
	bottom:0;
	right: 0; 
	font-family: initial;
	font-size: 1.337vH;
	margin:3px;
	font-family: helvetica neue,helvetica !important;
	background: white;
	padding: 5px;
	border-radius: 5px;
}
footer a {
	text-decoration: none;
	color: rgb(43, 146, 206);
	font-size: 1.337vH;
	font-family: helvetica neue,helvetica !important;
}
footer a:hover {
	color: #3e416d;
}

/*RESPONSIVE QUERIES*/
@media screen and (min-aspect-ratio: 8/5) {

	/*ANIMATION CLASSE */
	.translationBackground {
		animation: translationBackroundDek 1s 1 forwards;	
	}
	#accueil, #backgroundImg,#contenerWelcome {
	    height: 80vH !important;
	    margin-top: -40vH !important;
	    width: calc(80vH * 1.479) !important;
	    margin-left: calc((80vH * 1.479)/-2) !important;
	}
	#accueil div {
		width: calc(80vH * 1.479) !important;
		margin-left: calc((80vH * 1.479)/-2) !important;
	}
	#accueil img {
		width: calc(80vH * 1.479) !important;
		height: 80vH !important;
	}
	#languetteHaut {
		top: -44.5vH !important;
		transform: rotateX(0deg);
		transform-origin: bottom;
	}
	#languetteHaut img {
		height: calc(80vH/1.7978) !important;
	}
	#languetteBas {
		transform: rotateX(90deg);
		transform-origin: top;
	}
	#languetteBas img {
		height: calc(80vH/1.7978) !important;
	}

	.bigText * {
		font-size: calc(((70vH * 1.479) / 12) / 2) !important;
	}
	#clickButton {
		font-size: calc(((70vH * 1.479) / 12) / 3.5) !important;
	}
	.backgroundTop {
		transform: scale(0.3) !important;
		top: 4vH !important;
	}
	#backgroundImg img {
		width: calc(80vH * 1.479) !important;
		height: 80vH !important;
	}
	
	
}
@media screen and (min-aspect-ratio: 2/3) {
	#menus .menuText span{
		font-size: calc((80vH/7)/3) !important;
	}
	#menus {
	    height: 80vH !important;
	    margin-top: -40vH !important;
	    width: calc(80vH * 1.479) !important;
	    margin-left: calc((80vH * 1.479)/-2) !important;
	}
}
/*BACKGROUND*/
@media (max-aspect-ratio: 1088/726) {
  	#backgroundPage {
		height: 100vH;
		width: calc(100vH * (1088/726));
		margin-top: -50vH;
		margin-left: calc((-100vH * (1088/726))/2);
	}
}