/*
Copyright (c) Jonas Cohen
*/
:root {
/*	--mainPolicy:  "Italianno";
	--importantColor: #d18919;
	--mainColor: #c0a560;
	--mainColor: #85878b;
	--hoverColor: #85878b;
	--borderColor: #d18919;*/
	--mainPolicy:  "Trajan";
	/*#383b7a*/
	--importantColor: #505256;
	/*--mainColor: #c0a560;*/
	--mainColor: #505256;
	--hoverColor: #021b3d;
	--borderColor: #505256;
}

* {
	font-size: 11px;
	font-family: var(--mainPolicy);
	font-style: normal;
}
.background-full {
	background: no-repeat center center fixed;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}
#houppaBody {
	background-image: url(ressources/backgrounds/houppa.jpeg);
}
#chabbatBody {
	background-image: url(ressources/backgrounds/chabbat.jpeg);
}

input[type="text"] {
	border: 1px solid rgba(169, 169, 169, 0.9);
	box-shadow: none;
	vertical-align: super;
}
.select-style {
	display: inline-block;
	background-color: #fff;
	border: rgba(169, 169, 169, 0.9) 1px solid;
	overflow: hidden;
	position: relative;
	border-radius: 3px;
	width: 50px;
	padding: 0;
	padding-left: 9px;
	height: 30px;
	vertical-align: text-top;
}
.select-style select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	vertical-align: top;
	height: auto;
	border: 0;
	margin: 0;
	padding: 0;
	border-radius: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	background: #fff;
	color: var(--importantColor);
	border-color: var(--importantColor);
}
.select-style select option:hover {
	color: #000;
}
.select-style::after {
	content: '';
	position: absolute;
	top: 50%;
	margin-top: -2.5px;
	right: 2px;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent;
	border-top-color: transparent;
	border-top-color: var(--borderColor);
	border-width: 5px;
	border-style: solid;
	pointer-events: none;
}
label.addMessage {
	transition: .5s;
}
input[type="checkbox"].addMessage {
	margin-right: 10px;
	margin: 0 10px 0 25px;
	transition: .5s;
}
input[type="checkbox"].addMessage:checked ~ .privateMessage textarea{
	display: initial;

}
.privateMessage {
	display: flex; 
	flex-direction: column; 
	margin: 0 20px 60px 20px;
	transition: .5s;
}
.privateMessage textarea {
	display: none;
	color: var(--mainColor); 
	padding:20px;
	resize: none;
	font-size: 2rem;
	height: 200px;
	border: .5px solid var(--mainColor);
	transition: .5s;
}
input[type="checkbox"].addMessage:checked ~ .privateMessage textarea{
	display: initial;

}
input[type="checkbox"].addMessage:checked + label.addMessage{
	color: var(--importantColor);

}
.privateMessage textarea:focus,.privateMessage textarea:active {
	border: .5px solid var(--borderColor);
	color: var(--importantColor);
	outline: none;
}
#namesAdultes, #namesEnfants {
	display: none;
}
#assistMairie:checked ~ label #namesAdultes, #assistMairie:checked ~ label #namesEnfants {
	display: block;
}
#backgroundPage {
	position: fixed;
	z-index: 0;
	top: 50%;
	left: 50%;
	height: calc(100vW / (600/400));
	width: 100vW;
	margin-left: -50vW;
	margin-top: calc((-100vW / (600/400))/2);
}
#namesAdultes {
	/*display: inline-block; */
	/*vertical-align: top;*/
}
#namesEnfants {
	/*display: inline-block; */
	/*vertical-align: top;*/
}
#houppaLogo {
	height: 180px;
	margin-top: 10px;
}
.contenerCarte {
	border: 2px solid var(--borderColor);
	padding: 30px;
	background: white;
	margin-top: 241px;
	padding: 20px 80px 40px 80px;
	color: var(--mainColor);;
	margin-bottom: 80px;
}
.contenerCarte * {
	margin: 0;
}
#carteMairie, #carteHouppa, #carteChabbat {
	position: relative;
	min-height: 100vH;
	width: 80vW;
	margin: 0 auto 50px auto;
	opacity: 0.95;
}
#contenerCarteHouppa {
	padding: 20px 80px 40px 80px;
	color: #85878b;
	color: var(--mainColor);
	margin-bottom: 80px;
}
.logoImg {
	width: 400px;
	margin: 50px auto;
}
.logoImg img{
	width: 100%;
}
.titleCarte {
	margin-bottom: 40px;
	font-family: var(--mainPolicy);
	font-size:3rem;
	text-align: center;
	font-weight: 300;
	text-align: center;
}
.hebrewText {
	color: var(--importantColor);
	font-weight: 600;
	font-family: 'Hebrew', sans-serif;
	font-size: 0.8em;
	word-spacing: 6px;
	letter-spacing: -1.65px;
}
.adresseMin {
	font-size: 1.5rem;
}
#mariesTitleChabbat {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 30px 0;
	/* color:#d18919; */
}
/*#carteMairie .contenerCarte {
	text-align: center;
	padding-top: 100px;
	margin-bottom: 70px;	
}*/
#carteMairie .contenerCart * {
	margin: 0;
	padding: 0;
}
#mariesTitle {
	text-align: center;
	margin: 30px 0 0 0;
	color: var(--importantColor) ;
}
.carteUlContener {
	font-size: 2rem;;
	margin: auto;
	width: max-content;
}
.carteListe {
	margin: 10px 0 0 -40px;
	padding: 0;
}
.carteListe li {
	font-size: 1.9rem;
}
.text-to-reset {
	color: black !important;
}
.importantAnd {
	font-family: var(--mainPolicy);
	font-size: 3rem;
	color: #a9a9a9;
	color: var(--importantColor);
}
.importantTxt {
	font-size: 4rem;
	color: var(--importantColor);
	font-family: var(--mainPolicy);
	font-weight: 600;
	-webkit-font-smoothing: antialiased;
}
.houppaSmall {
	font-size: 1.5rem;
}
h2.importantTxt{
	color: #a9a9a9;
	color: var(--importantColor);
}
#sayText {
	font-size: 2rem;
}
#yesTitle {
	font-family: var(--mainPolicy);
	text-align: center;
	font-size: 5rem;
	font-weight: 400;
	color: var(--importantColor);
}
#mainText {
	font-size: 2rem;
}

/*BOUTTON ERGONOMY*/
.buttonErgonomyLink {
	color:#a9a9a9;
	color: var(--importantColor);
	text-decoration: none; 
	text-align: center;
}
.buttonErgonomyLink:hover {
	color: var(--hoverColor);;
}
#buttonErgonomy {
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
}
.buttonErgonomyLink div {
	width: max-content; 
	text-align: center; 
	/*margin: 30px; */
	font-size: 25px;
}


/*FORMULAIRE*/
.formCarte {
	background: white;
	padding: 30px;
	color: var(--importantColor);
	border: 2px solid var(--borderColor);
}
.formCarte *{
	font-size: 2.3rem;
}
#contenerHere {
	margin:  0 0 10px 20px
}
#contenerMiss {
	margin: 0 0 30px 20px;
}
.sendDataButton {
	transition: .2s;
	background: white;
	border: 2px solid var(--borderColor);
	box-shadow: 0 5px 15px rgba(169, 169, 169, 0.1);
	padding: 10px;
	color: var(--importantColor);
    appearance: none;
    -moz-appearance: none;
	-webkit-appearance: none;
}
.sendDataButton:hover {
	color: var(--hoverColor);
}
.telLink {
	font-size: 2rem; 
	color: #2B92CE;
}
/*HOUPPA*/
#carteHouppa #houppaLogo {
	position: relative;
	top: -20px;
}
#aideDeDieu {
	text-align: right;
	height: 20px;
	font-size: 1.5rem;
}
#headerHouppa {
	display: flex;	
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 35px;
}
#headerHouppa h2 {
	/*margin: 100px;*/
	font-weight: 300;
	width: 45%;
}
#headerHouppa div {
	font-size: 2rem ;
}
#footerHouppa {
	display: flex;	
	flex-direction: row;
	justify-content: space-around;
	margin-top: 50px;
}
#footerHouppa p {
	font-size: 2rem ;
	font-weight: 300;
	text-align: center;
	margin:0;
}
#footerHouppa a {
	font-style: none;
	color: inherit;
	font-size: inherit;
	text-decoration: none;
}
#mainHouppa	* {
	text-align: center;	
}
#mainHouppa p{
	font-size: 2rem;
}
.famillesTitle {
	font-size: inherit;
	color: var(--importantColor);
}
#dodili {
	margin-top: 30px;
}
#mariesTitleHouppa {
	display: flex;
	flex-direction: row;
	color: var(--importantColor);
	justify-content: center;
	margin: 0 0 30px 0;
}
#mariesTitleHouppa	div {
	margin: 0 10px;
	font-size: 3rem;
}
.hebrewText {
	font-style: italic;
}
.contenerCarte p {
	font-size: 2rem;
	text-align: center;
}

.menuButtonContener {
	background: white;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	padding: 0px;
	border: 2px solid var(--borderColor);
	margin: 30px;
	box-shadow: 0 5px 15px rgba(169, 169, 169, 0.9);
	width: max-content;
}
.menuButton {
	/*box-shadow: 0 5px 15px rgba(169, 169, 169, 0.9);*/
	margin: 11px;
	/*border: 1px solid rgb(169, 169, 169);*/
}
.menuButton a {
	padding: 10px;
	font-size: 30px;
	color: var(--importantColor);
	text-decoration: none;
	font-family: var(--mainPolicy);
}
.menuButton a:hover {
	color: var(--hoverColor);
}
.nextButtonContener {
	background: white;
	position: fixed;
	z-index: 1;
	top: 0;
	right:0;
	padding: 0px;
	border: 2px solid var(--borderColor);
	margin: 30px;
	box-shadow: 0 5px 15px rgba(169, 169, 169, 0.9);
	width: max-content;
}
.nextButton {
	/*box-shadow: 0 5px 15px rgba(169, 169, 169, 0.9);*/
	margin: 11px;
	/*border: 1px solid rgb(169, 169, 169);*/
}
.nextButton a {
	padding: 10px;
	font-size: 30px;
	color: var(--importantColor);
	text-decoration: none;
	font-family: var(--mainPolicy);
}
.nextButton a:hover {
	color: var(--hoverColor);
}
@media screen and (max-width: 1450px) {
	* {
		font-size : 10px;
	}
}
@media screen and (max-width: 1300px) {
	#carteMairie, #carteHouppa, #carteChabbat {
		width: 90vW;
	}
	.houppaSmall, .carteListe li {
		font-size: 1.95rem;
	}
}
@media screen and (max-width: 1200px) {
	#carteMairie, #carteHouppa, #carteChabbat {
		width: 90vW;
	}
	#contenerCarteHouppa {
		padding: 20px 30px 30px 30px;
	}
}
@media screen and (max-width: 1000px) {
	
}
@media screen and (max-width: 950px) {
	#carteMairie, #carteHouppa, #carteChabbat {
		width: 90vW;
	}
}

/*BACKGROUND*/
@media (max-aspect-ratio: 600/400) {
  	#backgroundPage {
		height: 100vH;
		width: calc(100vH * (600/400));
		margin-top: -50vH;
		margin-left: calc((-100vH * (600/400))/2);
	}
}