#photomaton +div{ /*pour 000hostinger.com*/
	display:none !!!important;
	pointer-events: none;
	visibility: hidden;
}

@font-face {
	font-family: faradisa;
	src: url(faradisa.ttf);
}

:focus{
	outline:none !important;
}

body{	
	margin: 0;padding: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	/*font: 100% faradisa;*/
	/*font: 100% Verdana, Arial, Helvetica, sans-serif;*/
	font-size:  26px;
	line-height:40px;
	background-color:#222;
	color:#fff;
}

#maincont{
	/*to avoid fullscreen lock*/
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:auto;
	height:auto;
	background-color:#222;
	overflow:auto;
	margin:0;
}

a{
	text-decoration:none;
	color:#fff;
}

/************************************
* From
/***********************************/
.form{
	padding : 20px;
	max-width: 500px;
	margin:auto;
}

.form .title{
	font-weight:bold;
}

.field{
	width:100%;
	margin:20px 0;
	box-sizing: border-box;
}

.field.sameline{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.field .label{
	line-height:40px;
}

input[type="text"],
textarea{
	font-size:36px;
	line-height:46px;
	border-radius: 10px;
	padding: 2px 10px;
	/*font-family:Arial, Helvetica Neue, Helvetica, sans-serif;*/
	font-family:faradisa;	
	box-sizing: border-box;
	resize: none;
	background-color:#333;
	border-color:#555;
	color:#eee;
	border-width: 2px;
    border-style: inset;
}

textarea{
	width:100%;
}


/*.button2{
	border:1px solid #555;	
	font-size:100px;
	margin:20px;
	width:100px;
	height:100px;
	vertical-align:center;
	text-align:center;
	border-radius:20px;
	box-shadow:3px 3px 3px #222;
	text-decoration:none;
	line-height:100px;
	background-color: #fcfff4;
	
	
}*/





/*************************
* Buttons
**************************/





.btn{

	padding:5px 20px;
	/*margin:15px 0;*/
	display: inline-block;
	cursor: pointer;
	
	border-radius:50px;
	border-width: 2px;
    border-style: outset;
    
	color:#eee;
	
	background: linear-gradient(to bottom, #999 0%,#333 100%);
	border-color: #777; 	
	text-align:center;
	vertical-align:center;		
}



.btn.red{
	border-color: #ca6767;  
	/*background:#e74c3c;*/
	background: linear-gradient(to bottom, #e74c3c  0%,#6f1e16  100%);
	/*color:#ccc;*/
}

.btn.icon{
	width:50px;
	height:50px;
	display: inline-flex;
	padding:0;
	align-items: center;
	justify-content: center;
}

.btn.icon img{
	width:70%;
	height:70%;
}


.popup{
	position: absolute;
	max-width: 700px;
	background-color:#444;
	margin:auto;
	left:0;
	right:0;	
	top:0;
	bottom:0;
	margin:auto;
	width: fit-content;	
	height: fit-content;
	border:2px solid #555;
	border-radius:20px;
	box-shadow:3px 3px 3px #222;
	padding:20px;	


}

/************************************
* Diamorama
/***********************************/

div#gallery,
#photomaton{
	font: 100% faradisa;
}

div#gallery{
	text-align: center;
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	overflow:hidden;
}

div#gallery img{
	max-width: 100%;
	max-height: 100%;
	width:100%;
	height:100%;
	object-fit: contain;		
	transition: none;
	position: absolute;
    top:0;
	left:0;	
	
}

div#gallery img.unzoom{
	opacity:0;
	transform: rotate(0) scale(1);
	transition: all 5s ease-in-out;
}

div#gallery img.zoom{
	opacity:1;
	transform: rotate(-1deg) scale(1.2);
	transition: all 5s ease-in-out;
}

div#gallery img.slideright{
	transition: none;
	left:100%;
}

div#gallery img.noslide{
	transition: all 1s ease-in-out;
	left:0%;
}

div#gallery img.slideleft{
	transition: all 1s ease-in-out;
	left:-100%;
}

div#gallery div.pn{
	position:absolute;
	bottom:50%;
	left:0;
	width:100%;
	display:flex;
	justify-content:space-between;
}


div#gallery pn a{
	margin : 20px;
	
	font-size:100px;
	text-shadow: 0px 0px 10px #000;
	color:#CCC;
}
#caption{
	position:absolute;
	width:100%;
	bottom:0;
	left:0;
	text-align:center;
	color:#ccc;
	font-size:80px;
	text-shadow: 0px 0px 10px #000;
}



@keyframes blink {
	0% { background: rgba(255,0,0,0.5); }
	50% { background: rgba(255,0,0,0); }
	100% { background: rgba(255,0,0,0.5); }
}	

.blinkFields{
	animation-direction: normal;
	animation-duration: 0.25s;
	animation-iteration-count: infinite;
	animation-name: blink;
	animation-timing-function: ease;	
}






/************************************
* switch
/***********************************/

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  vertical-align:middle;
  align-items: center;
  margin-left: 20px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}