html {
			background-color:#9eabed;
		}
		body {
			font-family:Arial;
		}
		main {
			width:1024px;			
			position:relative;
			left:50%;
			margin-left:-512px;
			top:50px;
			box-sizing: content-box;
		}
		main img.ban {
		width:100%;
			display:inline-block;
		}
		h1 {
			height:28px;
			position:relative;
			line-height:28px;
			padding-left:40px;
			border-bottom:3px black solid;
			text-transform:uppercase;
			background: linear-gradient(141deg, rgba(18,214,223,1) 31%, rgba(199,132,246,1) 66%);
			font-size:16px;
			margin-top:0px;
				box-sizing: content-box;
		}
		h1 img {
			position:absolute;
			left:0px;
		}
		form {
    border: 3px solid #000000;
			z-index:1;
    height:auto;
    width: 800px;
			margin-left:-400px;
		top:200px;	
    display: block;
    position: absolute;
			left:50%;
     transition-property: height;
  transition-duration: 4s;
  transition-delay: 2s;
	background-color:rgba(254,250,129,0.9);
	padding-bottom:40px;
			min-height: 219px;
			

}
	input, taxtarea, [type="checkbox"] {
		border-style:inset;
		border-width:2px;
		border-top-color:black;
		border-right-color:black;
		border-left-color:#dedede;
		border-bottom-color:#dedede;
	}
	form span {
		border-bottom-width: 3px;
		border-bottom-color:black;
		border-bottom-style:solid;
		padding-left:16px;
		padding-right:8px;		
		text-align:center;
		font-weight:bold;
	}
	form span.input {
		border:none;
		background-image:url('images/case_vide.jpg');
		width:25px;
		height:17px;
		padding-left:0px;
		display:inline-block;
				position:relative;
		bottom:-2px;
		background-repeat:no-repeat;
		background-size:auto 100%;
	}
	form input[type="checkbox"]{

		border:none;
		border-width:2px;
		border-top-color:black;
		border-right-color:black;
		border-left-color:#dedede;
		border-bottom-color:#dedede;		
		height:15px;
		
		
	}
/*-------les checkbox -------*/


input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label::before {
  content:'';  
  padding: 0 0.75rem;
  margin-right: 0.3rem;
}
input[type="checkbox"]:checked + label::before {
  
	background-image:url('images/croix.gif');
	background-position:center center;
	background-size:8px auto;
	background-repeat:no-repeat
	
}
	forma p {
		position:relative;
	}

/*---- slider ----*/
h1.calage_titre {
    position: relative;
    top: 315px;
    border-left: 3px black solid;
    border-right: 3px black solid;
    border-top: 3px black solid;
    border-bottom: none;
    width: 984px;
}
div.slider {
	display:inline-block;
	width:1024;
	position:relative;
	top:303px;
	z-index:0;
}

.popup, a.suivant {
 
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	font-weight:bold;
	position:absolute;
	right:40px;
	top:200px;
	border:black solid 3px;
	padding-left:16px;
	padding-right:16px;
	padding-top:5px;
	padding-bottom:0px;
	font-size:26px;
	height:35px;
	line-height:35px;
	box-sizing: content-box;
color:black;
	text-decoration:none;
	background: linear-gradient(141deg, rgba(18,214,223,1) 31%, rgba(199,132,246,1) 66%);
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
    width: 360px;
    color: black;
    text-align: center;
    padding: 0px 0;
    position: absolute;
    z-index: 1;
    top: 60px;
    left: 0%;
    margin-left: -387px;
	border:none;
    

  
}
#myPopup {

	
}
#myPopup img {
width:100%;
	height:auto;
  
}
	img.imge1, img.imge2{
		width:450px;
		
	}
/* Popup arrow */


/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

.gauche{
	display:inline-block;width:100%;position:relative;top:330px;z-index:0;
}
.droite {display: inline-block;width: 50%;position: absolute;top: 788px;z-index: 0;left: 580px;}

	.droite img {
		width:450px;
	}

@media (max-width: 768px) {
  .noresp {
    display: none!important;
  }
	  .resp {
    display: block!important;
  }	
main {
width: 100%!important;
    position: relative;
    left: 0%;
    margin-left: 0px;
    padding-left: 10px;
    padding-right: 10px;
    top: 0px;
    box-sizing: border-box;
}

main img.ban {
    width: 101%;
    display: inline-block;
}
h1 {

    font-size: 2.5vw;

}
form {    
    width: 100%;
			margin-left:0px;
		position:unset;
	margin-top:20px;
			left:0%;
			min-height:inherit;
}
	h1.calage_titre {
position: relative;
    margin-top: 20px;
    width: auto;
    top: inherit;
		margin-bottom: 0px;
		    width: 101.5%;
		box-sizing: border-box;
}
	.popup {
		top:10px!important;
position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: bold;
    /* position: absolute; */
    left: 50%;
    width: 30%;
    text-align: center;
    margin-left: -15%;
    /* margin-bottom: 50px; */
    /* top: 200px; */
    border: black solid 3px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 5px;
    padding-bottom: 0px;
    font-size: 26px;
    height: 35px;
    line-height: 35px;

}
	.popup .popuptext {

    width: 317px;
    color: black;
    text-align: center;
    padding: 0px 0;
    position: absolute;
    z-index: 1;
    top: 75px;
    left: 50%;
    margin-left: -180px;
    border: none;
}
	.popup, a.suivant {
    top: 300px;
	}
form span {
    font-size: 1.8vw;
}
	div.slider {
		top: unset;
		width:100%;
		
	}
		.slide {
    width: 66.6%;		
	}	
	.slide img {
    width: auto!important;
    height: 100%;
}
	img.imge1, img.imge2{
		width:350px;
		
	}
img.imge2{
		float:right;
		
	}
	div.imge3{
		    display: block;
    width: 100%!important;
    position: relative;    
    z-index: 0;
    /* height: 100px; */
    left: 0px!important;
    /* float: right; */
}
		div.imge3 img{

    width: 350px;
}
	.slide {
    width: 66.6%;		
	}	
	.gauche{
	top:20px;
}
.droite {top: 46px;
    width: 450px;
    position: relative;
	    left: 0px;
	
	}
	.droite img {
		width:100%;
	}
}
@media (max-width: 450px){
form span {
    font-size: 3.2vw;
}
	.droite {
		width:95%;
	}
}