@import 'fonts.css';

html {
	--dark-grey: #191919;
	--light-grey: #F6F6F6;
	font-size: 62.5%;
}

body,
html {
	width: 100%;
	padding: 0;
	margin: 0;
	display: flex;
	box-sizing: border-box;
	position: relative;
	flex-direction: column;
	align-items: center;
	color: var(--dark-grey);
	background-color: var(--light-grey);
	font-family: Hind;
}

body * {
	box-sizing: border-box;
	font-size: 1.6rem;
	margin: 0;
	outline: 0 !important;
}

body {
	font-size: 1.6rem;
}

html body input[type=text],
html body input[type=password] {
	background-color: #fff !important;
	border: 2px solid #fff !important;
}

header {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--dark-grey);
	color: white;
	height: 130px;

}

.page_fiche button {
	cursor: pointer;
}

.page_fiche.fiche_salon header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}

header a {
	position: absolute;
	left: 9vw;
}

header a img {
	height: 70px;
}

.staff {
	background-color: var(--dark-grey);
	color: white;
}

.staff header,
.create header {
	height: 0;
}

.staff main,
.create main {
	min-height: 100vh;
	height: fit-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.staff main h1,
.create main h1 {
	font-size: 2rem;
	margin: 0 0 5vh 0;
}

.staff main form,
.create main form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.create {
	overflow-y: auto;
}

.create main {
	padding-top: 10vh !important;

	padding-bottom: 10vh !important;
	justify-content: center !important;
}

.create main form {
	width: 50vw;
}

.create .infos_client {
	display: flex;
	justify-content: center;
	align-items: center;
}

.create .infos_client div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 10px;
}

.inputBirthdate {
	display: flex;
}

.form_infos .inputBirthdate {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.form_infos .containerDate {
	width: 10%;
}

.inputAdressTel {
	width: calc(18vw * 2 + 20px);
}

.birthdatemodif {
	width: 4ch;
	margin-right: auto;
	margin-left: auto;
}

.birthdate {
	width: 4ch;
	margin-right: 5px;
	margin-left: 5px;
}

.create .infos_client div input {
	text-align: center;
	width: 18vw;

}

.create main form .new_client {
	color: white;
	text-align: center;
	margin: 10px 0;
}

.create main form .new_client label {
	color: white;
	margin-left: 10px;
	transition: color .1s;
	font-weight: bold;
}

.create main form .check_cond {
	color: white;
	text-align: center;
	margin: 10px 0;
}

.create main form .check_cond label {
	color: white;
	margin-left: 10px;
	transition: color .1s;
	font-size: 1.4rem;
	opacity: .8;
}

.create main form .check_cond label a {
	color: inherit;
	font-weight: bold;
	text-decoration: underline;
	font-size: 1.4rem;
	opacity: .8;
}

.create main form .check_cond label.red_error {
	color: #E21617;
}

.staff main form p,
.create main form p {
	font-weight: bold;
}

.staff main form label,
.create main form label {
	margin: 12px 0 5px 0;
}

.staff main form select,
.create main form select {
	background-color: white;
	border-radius: 0;
	border: 0;
	width: 100%;
	text-align: center;
	padding: 5px;
}

.staff main form input[type=submit],
.create main form input[type=submit] {
	background: transparent;
	color: white;
	border: solid 2px white;
	padding: 5px 30px;
	margin-top: 25px;
}

.create {
	background-color: var(--dark-grey);
	color: white;
	min-height: 100vh;
	height: fit-content;
}

.create main {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.ff_cont {
	position: relative;
	top: 0;
	width: 75vw;
	left: calc(25vw / 2);
}

.fiche_salon.com_closed .ff_cont {
	left: 0;
}

.fiche_visiteurs .ff_cont {
	width: 75vw;
	top: 0;
	left: 0;
}

.fiche_footer {
	list-style: none;
	padding: 0 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 15px 0;
	text-align: center;
}

.fiche_footer li {
	margin: 5px 0;
}

.fiche_footer a {
	color: #191919;
	text-decoration: underline;
}

main {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

main section {
	padding: 25px;
}

.commentaires {
	width: 25vw;
	background-color: var(--dark-grey);
	min-height: calc(100vh - 130px);
	height: 100%;
	word-break: break-word;
	position: fixed;
	left: 0;
	top: 0;
	overflow-y: hidden;
	color: white;
	padding: 0 !important;
}

.commentaires .dates .mc-link {
	color: white;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
	font-size: 1.8rem;
	text-decoration: none;
	padding: 10px;
	border: solid 1px;
	width: max-content;
	position: relative;
	margin: 50px auto 0;
}

a.mc-link::before {
	content: "";
	height: 1px;
	width: 50%;
	position: absolute;
	background-color: white;
	top: -30px;
	opacity: .3;
	pointer-events: none;
}

.commentaires .dates .mc-link i {
	margin-right: 10px;
}

.commentaires article {
	height: calc(100% - 75px - (8vh + 25px));
	padding: 0 25px 25px 25px;
	/* background: content-box; */
	width: 100%;
	background-color: var(--dark-grey);
	position: absolute;
	top: calc(8vh + 25px);
	left: 0;
	overflow-y: auto;
	transition: left .5s;
}

ul.list_dates {
	list-style: none;
	padding-left: 0;
	text-align: center;
	height: max-content;
}

.list_dates li {
	margin: 15px 0px;
}

.list_dates li a {
	color: white;
	text-decoration: none;
	opacity: .7;
}

.commentaires .coiff_coms {
	left: -25vw;
}

.commentaires.coms_visible .coiff_coms {
	left: 0;
}

.commentaires .commentaire {
	margin-bottom: 20px;
	quotes: "«" "»";
}

.commentaires .commentaire:not(.first_com)::before {
	content: "";
	display: block;
	height: 1px;
	width: 50%;
	margin: 0 auto 20px auto;
	background-color: #ccc;
	border: 0;
}

.commentaires .commentaire .com_title {
	font-weight: bold;
	margin-bottom: 5px;
}

.commentaires .commentaire p:not(.com_title)::before {
	content: open-quote;
	margin-right: 5px;
	color: #666;
}

.commentaires .commentaire p:not(.com_title)::after {
	content: close-quote;
	margin-left: 5px;
	color: #666;
}

.galerie {
	width: 75vw;
	min-height: calc(100vh - 130px);
	position: relative;
	padding-top: 0 !important;
}

.fiche_visiteurs .galerie {
	top: 0;
	left: 0;
	z-index: 0;
}

.fiche_salon.com_opened .galerie {
	width: 75vw;
	min-height: calc(100vh - 130px);
	position: relative;
	top: 0;
	left: calc(25vw / 2);
	z-index: 0;
}

.fiche_salon.com_closed .galerie {
	width: 75vw;
	min-height: calc(100vh - 130px);
	position: relative;
	top: 0;
	left: 0;
	z-index: 0;
}

.galerie .photo {
	display: flex;
	flex-wrap: wrap;
}

.page_visiteurs .galerie .photo {
	position: relative;
	right: -2vw;
}

.galerie button:not(.add_photo) {
	width: 20vw;
	height: 20vw;
	background-position: center;
	background-size: cover;
	border: 0;
	color: white;
	padding: 0;
	margin: 1.5vw;
}

.galerie .add_photo,
.commentaires .add_com {
	height: 30px;
	background: transparent;
	border: 0;
	outline: 0 !important;
}

.commentaires .add_com {
	opacity: .6;
}

.galerie .add_photo {
	position: absolute;
	right: 0;
	top: 0;
}

.commentaires .add_com {
	display: block;
	margin: 15px auto;
	font-size: 1.3rem;
	color: white;
}

.commentaires .add_com img {
	height: 100%;
	height: 1.3rem;
	margin-right: 0.5vw;
	vertical-align: middle;
	filter: invert(1);
}

.galerie .add_photo img {
	height: 100%;
}

.galerie button p {
	width: 100%;
	height: 100%;
	display: flex;
	background: rgb(0, 0, 0);
	background: linear-gradient(0deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 50%);
	font-size: 1.2rem;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
	padding: 10px;
	font-family: Hind;
	line-height: 1.3rem;
}

.galerie button p span {
	font-size: 1.2rem;
}

.galerie button p span .fas::before {
	font-size: 1.2rem;
	margin-right: 4px;
}

.galerie button p span .fa-paint-brush {
	margin-left: 10px;
}

.grey_form {
	overflow: auto;
	background-color: var(--dark-grey);
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	height: 100vh;
	display: none;
	opacity: 0;
	transition: opacity .2s;
	z-index: 9997;
}

.opened {
	opacity: 1;
}

.form_photo * {
	display: block;
	text-align: center;
}

.form_photo input[type=file] {
	margin: auto;
}

.grey_form .close,
.apercu_photo .close {
	height: 25px;
	background: transparent;
	border: 0;
	position: absolute;
	right: 25px;
	top: 25px;
	margin: 0;
}

.close img {
	height: 100%;
}

.form_photo form {
	height: 60%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	width: 40%;
}

.form_photo,
.form_com,
.modif_form_com,
.apercu_photo {
	z-index: 9999;
}

.form_com form,
.modif_form_com form {
	height: 60%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	width: 40%;
}

.form_infos form {
	height: max-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	width: 40%;
}

.form_photo form div,
.form_com form div,
.form_infos form div,
.modif_form_com form div {
	width: 100%;
}

.form_infos form div {
	display: flex;
	flex-direction: column;
}

.form_com form div label,
.modif_form_com form div label {
	display: block;
	text-align: center;
}

.form_infos form div label {
	display: block;
	text-align: center;
	margin-bottom: 8px;
}

.form_photo form select,
.form_com form div textarea,
.modif_form_com form div textarea {
	background-color: white;
	border-radius: 0;
	border: 0;
	width: 100%;
	text-align: center;
	padding: 5px;
}

.form_com form div textarea,
.modif_form_com form div textarea {
	text-align: left;
	height: 15vh;
	font-family: Hind;
	font-size: 1.6rem;
}

.grey_form input[type=submit] {
	background: transparent;
	color: white;
	border: solid 2px white;
	padding: 5px 30px;
	transition: all .2s;
}

.grey_form input[type=submit]:hover {
	background-color: white;
	color: var(--dark-grey);

}

.apercu_photo {
	display: flex;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background: rgba(150, 150, 150, .5);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity .2s;
}

.apercu_photo.active {
	opacity: 1;
}

.apercu_photo div {
	display: flex;
	width: 70vh;
	background-color: black;
	height: 70vh;
	border: solid 15px white;
	background-position: center;
	background-size: cover;
}

.apercu_photo ul {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-top: 15px;
	width: 70vh;
}

.apercu_photo ul li button {
	background: transparent;
	color: white;
	font-size: 1.6rem;
	/*border: solid 2px white;*/
	border: 0;
	padding: 8px;
	background-color: var(--dark-grey);
	margin: 5px;
	/*min-width: calc(70vh / 2 - 10px);*/
	width: 5rem;
	height: 5rem;
	border-radius: 9999px;
}

.apercu_photo ul li button p {
	display: none;
}

.apercu_photo ul li button i {
	/*margin-right: 10px;*/
	font-size: 2rem;
}

.search {
	background-color: var(--dark-grey);
	color: white;
	min-height: 100vh;
	height: fit-content;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.search .mobile-header {
	display: none;
}

.search h1 {
	margin-top: 5vh;
	margin-bottom: 10px;
}

.search form {
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-content: center;
	align-items: center;
}

.search form input {
	width: 40%;
	margin-top: 1vh;
}

.search .results {
	list-style: none;
	padding-left: 0;
	width: 60%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 5vh;
}

.search .results li {
	background: transparent;
	border: solid 2px white;
	width: 30%;
	margin: 1%;
	/*margin-top: 5vh;*/
	max-width: 50%;
	text-align: center;
	min-height: 40px;
}

.search .results .add_fiche {
	border: 0;
	background-color: #E21617;
}

.search .results .add_fiche a:hover {
	color: white;
	background-color: #E21617;
}

.search .results li a {
	color: white;
	text-decoration: none;
	width: 100%;
	height: 100%;
	transition: all .2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.search .results li a:hover {
	background-color: white;
	color: var(--dark-grey);
}

.search footer {
	width: 90%;
	background-color: var(--dark-grey);
	padding: 10px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	margin-top: 50px;
}

.search main {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: auto;
	flex-direction: column;
}

.search footer ul {
	list-style: none;
	padding: 0;
	display: flex;
	justify-content: center;
}

.search footer ul li {
	margin: 0 20px 0 0;
	font-size: 1.3rem;
}

.search footer ul li a {
	color: white;
	text-decoration: none;
	transition: color .2s;
}

.search footer ul li a:hover {
	color: #ccc;
}

.search .add_fiche a span {
	margin-right: 10px;
}

h1 {
	font-size: 3.5rem;
	font-family: League Spartan;
}

.page_fiche h1 {
	text-align: center;
	display: flex;
	height: 5rem;
	margin: calc(65px - 2.5rem) 0;
	justify-content: center;
	align-items: center;
}

h2 {
	font-size: 2rem;
	font-family: League Spartan;
	margin-bottom: 30px;
}

.page_fiche .galerie h2 {
	height: 30px;
	display: flex;
	align-items: center;
	position: relative;
}

.fiche_visiteurs .galerie h2 {
	text-align: center;
	display: block;
}

.commentaires h2 {
	margin-bottom: 0;
	margin-top: 0;
	text-align: center;
}

h3 {
	font-size: 1.6rem;
	color: #777;
}

.petit_logo {
	height: 30px;
	margin: 10px 0 16px;
}

.close_com,
.open_com {
	background-color: white;
	border: 0;
	outline: 0 !important;
	width: 100%;
	height: 75px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	opacity: .7;
	position: absolute;
	left: 0;
	bottom: 0;
	background: transparent;
	opacity: 1;
	background-color: var(--dark-grey);
	color: white;
}

.close_com img,
.open_com img {
	height: 2.5vw;
	border: solid black 1px;
	padding: 2px;
	margin-right: 10px;
	filter: invert(1);
}

.close_com {
	display: none;
	text-decoration: line-through;
}

.coms_visible .close_com {
	display: flex;
}

.coms_visible .open_com {
	display: none;
}

.com_opened .commentaires {
	display: block;
}

.staff .logout {
	color: white;
}

.sup_com,
.edit_com {
	display: inline-block;
	background: transparent;
	border: 0;
	outline: 0;
	color: white;
}

.com_content {
	display: inline;
}

.commentaires .fa-trash-alt,
.commentaires i.fas.fa-edit {
	font-size: 1.3rem;
	opacity: .5;
}

.ticket {
	background-color: white;
	display: block;
	text-align: center;
	height: 100vh;
	padding: 20px 10%;
}

.ticket img {
	width: 5vw;
	margin: 10px auto 30px;
	display: inherit;
}

.ticket p,
.ticket h1 {
	display: inline-block;
	width: 45%;
	font-weight: bold;
}

.ticket h1,
.ticket .h1_like {
	font-weight: lighter !important;
	font-size: 2rem;
	font-family: Hind;
}

.ticket h2 {
	font-size: 2rem;
}

.ticket hr {
	background-color: black;
	border: 0;
	height: 1px;
	width: 90%;
	margin: auto;
	margin: 40px auto;
}

.ticket ul {
	list-style: none;
	padding-left: 0;
}

.create #telephone {
	margin-bottom: 10px;
	text-align: center;
}

.mail {
	text-align: center;
}

.mail input,
.mail .domaine {
	width: 12vw;
	height: 100%;
}

.create .mail input,
.create .mail .domaine {
	width: 18vw;
}

.mail .domaine {
	padding: 2px;
}

.to_docs {
	text-align: center;
}

.to_docs a {
	color: inherit;
	display: inline;
	margin: 0 10px;
}

main .loading {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--dark-grey);
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: white;
	z-index: 9999;
}

main .loading h2 {
	margin-top: 5vh;
}

.flash {
	position: fixed;
	z-index: 9998;
	background-color: white;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	display: none;
	opacity: 1;
	transition: opacity 1.3s;
}

#webcam,
#render_photo {
	width: auto;
	height: calc(100vh - 150px);
	position: absolute;
	top: 75px;
}

#webcam {
	z-index: 2;
}

#render_photo {
	z-index: 1;
}

.form_photo .consignes input#cowbell {
	/* display: initial; */
	width: 60vw;
	/* background-color: black; */
	/* height: 64px; */
	background: transparent;
	-webkit-appearance: none;
}

.form_photo .consignes input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
}

.form_photo .consignes input[type=range]:focus {
	outline: none;
	/* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

.form_photo .consignes input[type=range]::-ms-track {
	width: 100%;
	cursor: pointer;

	/* Hides the slider so custom styles can be added */
	background: transparent;
	border-color: transparent;
	color: transparent;
}

.form_photo .consignes input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: 4px solid var(--dark-grey);
	height: 32px;
	width: 32px;
	border-radius: 999px;
	background: #ffffff;
	cursor: pointer;
	margin-top: -13.95px;
	/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}

.form_photo .consignes i.fa-adjust {
	font-size: 24px;
	/* opacity: .2; */
	margin-right: 15px;
}

/* All the same stuff for Firefox */
.form_photo .consignes input[type=range]::-moz-range-thumb {
	border: 4px solid var(--dark-grey);
	height: 32px;
	width: 32px;
	border-radius: 999px;
	background: #ffffff;
	cursor: pointer;
}

/* All the same stuff for IE */
.form_photo .consignes input[type=range]::-ms-thumb {
	border: 4px solid var(--dark-grey);
	height: 32px;
	width: 32px;
	border-radius: 999px;
	background: #ffffff;
	cursor: pointer;
}

.form_photo .consignes input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	background: rgba(255, 255, 255, 1);
	border-radius: 5px;
}

.form_photo .consignes input[type=range]:focus::-webkit-slider-runnable-track {
	background: rgba(255, 255, 255, 1);
}

.form_photo .consignes input[type=range]::-moz-range-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	background: rgba(255, 255, 255, 1);
	border-radius: 5px;
}

.form_photo .consignes input[type=range]::-ms-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	background: rgba(255, 255, 255, 1);
	border-radius: 5px;
}

.form_photo .consignes input[type=range]::-ms-fill-lower {
	background: #fff;
	border: 0;
}

.form_photo .consignes input[type=range]:focus::-ms-fill-lower {
	background: #fff;
	border: 0;
}

.form_photo .consignes input[type=range]::-ms-fill-upper {
	background: #fff;
	border: 0;
}

.form_photo .consignes input[type=range]:focus::-ms-fill-upper {
	background: #fff;
	border: 0;
}

.no_video {
	display: flex;
	/* height: calc(100vh - 150px); */
	width: 100%;
	/* width: auto; */
	height: calc(100vh - 150px);
	position: absolute;
	top: 75px;
	flex-direction: column;
	color: #E21617;
	justify-content: center;
	font-size: 2rem;
	padding: 20px;
}

.no_video * {
	font-size: 1.6rem;
}

#switch-password-view {
	display: none;
}

#switch-password-view i {
	pointer-events: none;
}

.no_video i.fas.fa-exclamation-triangle {
	font-size: 8rem;
	margin-bottom: 80px;
}

.no_video a {
	color: white;
	font-weight: bold;
}

.actions_panel {
	display: none;
	width: 100%;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 0;
	height: 75px;
	background-color: var(--dark-grey);
}

.actions_panel button {
	display: flex;
	font-family: 'Hind';
	font-size: 2rem;
	justify-content: center;
	align-items: center;
	min-width: 190px;
	font-weight: bold;
	color: white;
	border: 0;
	outline: 0 !important;
	border-radius: 3px;
	height: 60%;
	margin: 0 10px;
	padding: 8px;
}

.actions_panel button:hover {
	opacity: .8;
}

.actions_panel button p {
	font-size: 2rem;
}

.actions_panel button i {
	margin-right: 5px;
	font-size: 2rem;
	position: relative;
	top: -0.1rem;
}

.actions_panel .refaire {
	background-color: #E21617;
}

.actions_panel .envoyer {
	background-color: #4eee77;
}

.form_photo h2 {
	top: 25px;
	position: absolute;
}

.form_photo .consignes {
	position: absolute;
	width: 100%;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 0;
	height: 75px;
	background-color: var(--dark-grey);
	display: flex;
}

.photo_form {
	position: relative;
	left: -100vw;
}

.sk-folding-cube {
	margin: 20px auto;
	width: 40px;
	height: 40px;
	position: relative;
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
	float: left;
	width: 50%;
	height: 50%;
	position: relative;
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

.sk-folding-cube .sk-cube:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #E21617;
	-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
	animation: sk-foldCubeAngle 2.4s infinite linear both;
	-webkit-transform-origin: 100% 100%;
	-ms-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.sk-folding-cube .sk-cube2 {
	-webkit-transform: scale(1.1) rotateZ(90deg);
	transform: scale(1.1) rotateZ(90deg);
}

.sk-folding-cube .sk-cube3 {
	-webkit-transform: scale(1.1) rotateZ(180deg);
	transform: scale(1.1) rotateZ(180deg);
}

.sk-folding-cube .sk-cube4 {
	-webkit-transform: scale(1.1) rotateZ(270deg);
	transform: scale(1.1) rotateZ(270deg);
}

.sk-folding-cube .sk-cube2:before {
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.sk-folding-cube .sk-cube3:before {
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}

.sk-folding-cube .sk-cube4:before {
	-webkit-animation-delay: 0.9s;
	animation-delay: 0.9s;
}

@-webkit-keyframes sk-foldCubeAngle {

	0%,
	10% {
		-webkit-transform: perspective(140px) rotateX(-180deg);
		transform: perspective(140px) rotateX(-180deg);
		opacity: 0;
	}

	25%,
	75% {
		-webkit-transform: perspective(140px) rotateX(0deg);
		transform: perspective(140px) rotateX(0deg);
		opacity: 1;
	}

	90%,
	100% {
		-webkit-transform: perspective(140px) rotateY(180deg);
		transform: perspective(140px) rotateY(180deg);
		opacity: 0;
	}
}

@keyframes sk-foldCubeAngle {

	0%,
	10% {
		-webkit-transform: perspective(140px) rotateX(-180deg);
		transform: perspective(140px) rotateX(-180deg);
		opacity: 0;
	}

	25%,
	75% {
		-webkit-transform: perspective(140px) rotateX(0deg);
		transform: perspective(140px) rotateX(0deg);
		opacity: 1;
	}

	90%,
	100% {
		-webkit-transform: perspective(140px) rotateY(180deg);
		transform: perspective(140px) rotateY(180deg);
		opacity: 0;
	}
}

@media (max-width: 1024px) and (orientation:portrait) {

	.galerie,
	.fiche_salon.com_opened .galerie {
		width: 90vw;
		padding: 25px 0;
		left: 0;
	}

	.ff_cont {
		left: 0;
		width: 90vw;
	}

	.galerie button:not(.add_photo) {
		width: 27vw;
		height: 27vw;
	}

	.commentaires {
		display: none;
	}

	.apercu_photo div {
		width: 70vw;
		height: 70vw
	}

	header a {
		position: absolute;
		left: auto;
		top: 5px;
	}

	header a img {
		height: 30px;
	}
}

@media (max-width: 800px) and (orientation:portrait) {

	.fiche_salon .red_back_btn {
		display: flex !important;
	}

	.search .mobile-header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.search .mobile-header img {
		width: 20vw;
		margin-top: 2rem;
	}

	.search .mobile-header ul {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left: 0;
		list-style: none;
		margin-top: 1rem;
	}

	.search .mobile-header ul li a {
		margin: 1rem;
		color: white;
		text-decoration: none;
	}

	.search .mobile-header ul li a.active {
		color: #E21617;
	}

	.search .mobile-header ul li a:hover {
		opacity: .7;
	}

	.loading * {
		text-align: center;
	}

	body,
	html,
	main,
	.form_photo {
		overflow-x: hidden !important;
	}

	.form_photo .consignes,
	.form_photo .actions_panel {
		bottom: 15vh;
		background-color: #191919;
	}

	.form_photo .actions_panel {
		top: 0;
		left: 25px;
		width: calc(100% - 100px);
		background-color: #191919;
		justify-content: left;
	}

	.form_photo .actions_panel button p {
		display: none;
	}

	.form_photo .actions_panel button i {
		margin: 0;
	}

	.form_photo .actions_panel button {
		height: 5rem;
		/* width: calc(4rem + 8px); */
		width: 5rem;
		border-radius: 9999px;
		min-width: 5rem;
		;
	}

	#webcam {
		width: calc(100vw);
		left: 0;
		height: auto;
		position: absolute;
		top: 75px;
	}

	#render_photo {
		width: auto;
		height: auto;
	}

	.create h1 {
		margin-top: 5rem !important;
	}

	.create .infos_client {
		display: flex;
		flex-direction: column;
		width: 80vw;
		text-align: center;
	}

	.create .check_cond {
		width: 80vw;
		margin-left: 0 !important;
	}

	.create .check_cond label {
		margin-left: 0 !important;
	}

	.create .infos_client input {
		width: 100%;
	}

	.search .back_nav {
		display: none !important;
	}

	.search footer ul {
		display: flex;
		flex-direction: column;
	}

	.search footer ul li {
		margin: 1rem 0;
		width: 100%;
		text-align: center;
	}

	.search footer ul li:nth-child(2) {
		display: none;
	}

	.apercu_photo ul {
		display: flex;
	}

	.apercu_photo .close_apercu {
		/*display:none;*/
	}

	.apercu_photo ul li {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.apercu_photo ul li button p {
		/*display:inline-block;
		margin-left:5px;*/
	}

	h1 {
		font-size: 2.5rem;
	}

	.form_photo h2 {
		top: 8rem;
	}

	.com_opened .commentaires {
		display: none;
	}

	.galerie button:not(.add_photo) {
		width: 85vw;
		height: 85vw;
		left: 0;
	}

	.ff_cont {
		left: 0;
		width: 85vw;
	}

	.galerie .photo {
		justify-content: center;
	}

	.apercu_photo div {
		width: 85vw;
		height: 85vw;
	}

	.apercu_photo ul li button {
		/*width: 60vw;*/
	}

	input[type=text],
	input[type=password],
	input[type=email],
	select,
	textarea {
		width: 80vw !important;
	}

	button::-moz-focus-inner,
	input::-moz-focus-inner {
		border: 0;
		padding: 0;
	}

	.password-container {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#password {
		max-width: 200px;
		margin: 0;
		position: relative;
		left: 2px;
		height: 2.6rem !important;
		border-radius: 0 !important;

	}

	#switch-password-view {
		display: inline-block;
		background-color: white;
		border: 0;
		height: 100%;
		outline: 0;
		margin: 0;
		position: relative;
		left: -2px;
		height: 2.6rem !important;
		padding: 0 !important;
		color: black !important;
		border-radius: 0 !important;
	}

	#switch-password-view {
		color: black !important;
	}

	input[type=text],
	input[type=button],
	input[type=submit] {
		-webkit-appearance: none !important;
		-webkit-border-radius: 0 !important;
	}

	#formweek,
	#formyear {
		width: auto !important;
	}

	.search .results {
		width: 80vw;
	}

	.search .results li {
		width: 80vw;
		max-width: 100%;
	}
}

/*@media only screen and (min-device-width: 480px) and (max-device-width: 767px) and (orientation: landscape) {
    .ff_cont{
    	width:75vw;
		left:0 !important;
		top:0 !important;
	}
	.page_fiche header{
		position: relative;
	}
	.galerie{
    	width: 75vw;
    	padding:25px 0;
    	left:0 !important;
    	top:0 !important;
	}
}*/

.form_infos .form_division,
.form_infos input[type=submit] {
	margin: 10px 0;
}

.form_infos textarea {
	font-family: Hind;
	font-size: inherit;
	height: 10ch;
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
	.search .back_nav {
		display: none !important;
	}
}

@media (orientation:portrait) {
	.form_infos form {
		width: 95%;
	}

	.form_infos form .form_division,
	.form_infos form .form_division input,
	.form_infos form .form_division textarea {
		width: 100% !important;
	}
}