*{
	font-family: 'Affogato Regular';
}

html {
  height: 100%;
}
body {
  min-height: 100%;
  background-color:#ebebeb;
}
header{
	display: flex;
    align-items: center;
    width: 100%;
    background-color: #FFF;
    color: #124483;
	font-family: 'Affogato Regular';
	text-transform: uppercase;
}

header img{
	height: 75%;
	margin: 0 10px 0 20px;
}

header p{
	margin: 0 10px;
}


footer{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    background-color: #124483;
    color: #FFF;
}

#PageInscription{
	display:flex;
	flex-flow: column nowrap;
	align-items: center;
	height:85% !important;
    overflow: auto;
}

#MyRoad{
	display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100px;
    background-color: #FFF;
    width: 85%;
    margin: 15px 0;
    color: #124483;
    padding: 5px;
	border: 1px solid #cdcdcd;
    border-radius: 25px;
}

#MyRoad img{
	height: 55%;
}

#MyRoad_titre{
	display:flex;
}

#MyRoad_titre .red{
	color:da1f26;
}

#MyRoad_titre h3{
	margin:0;
}

#MyRoad_titre p{
	color:#FFF;
	margin:0;
}

#MyRoad p{
    font-size: 0.75rem;
}

.ss_titres{
	background: #124483;
    width: 92%;
    text-align: center;
    height: 50px;
    border-radius: 25px;
    color: #FFF;
    border: 1px solid #cdcdcd;
    margin-bottom: 25px;
    margin-left: 7px;
    padding: 5px 0;
}

#divInscription { width:100%; height:80%;font-family: 'Affogato Regular';  }
.sw_loading{
	position:absolute; left:5px; top:5px; width:43px;height:11px;z-index:999999999;
	background-image:url("../img/loading.gif");
	background-repeat:no-repeat;
}

#divInscriptionImage{
	display:none;
	position: relative;
	width: 60%;
	background-color: 00448d;
	z-index: -1;
}


#divInscription tr.offreWeb div.cadreInfo { 
	overflow: hidden;
	max-height:0;
	color:#fff;
	width: 100%;
    text-align: start;
	padding: 15 0;
	transition-property: max-height, color;
    transition-duration: 0.5s;
}

#divInscription form table{
	width:90%;
}


#divInscription tr.offreWeb {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
}


#divInscription tr.offreWeb td {
    vertical-align: top;
    width: 100%;
    text-align: center;
    font-size: 0.80rem;
    background: #fff;
    margin: 10px 0;
    border-radius: 0 0 25px 25px ;
	position: relative;
	margin-bottom: 25px;
}

#divInscription span.radio {
	display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: #fff;
    background-color: #124483;
    font-size: 1.25rem;
    border-radius: 25px;
    position: absolute;
    width: 100%;
    left: 0;
    top: -20px;
}

#divInscription span.radio p{
	margin: 0;
    font-family: 'Frontage Condensed Inline TheFontsMaster com';
    font-weight: lighter;
    font-size: 2.75rem;
}

.center{
	text-align:center;
}

#inscrip{
    background: #FFF;
    width: 90%;
    margin: auto;
    padding: 15 0;
    position: relative;
	border-radius: 0 0 25px 25px ;
}

#RGPD, #TVA {
    background: #FFF;
    width: 80%;
    margin: auto;
    padding: 20px;
    position: relative;
    border-radius: 25px;
	color:124483;
}

#RGPD h3, #TVA h3,
#RGPD p, #TVA p{
	margin:0;
}

#RGPD p, #TVA p,
#RGPD 	, #TVA 	{
	font-size:0.75rem;
}

#divInscription form table td { padding:5px; color:#5d5d5d; position:relative; }
#divInscription form input { width:100%;  }
#divInscription form input[type="radio"] { width:auto;  }
#divInscription form {margin:0px; }
#divInscription form table td.rond, #divInscription form button.rond  {   /* display: inline-block; */ 
	background-image: url(../img/rondrouge.png); background-repeat: no-repeat; background-size: 8px; background-position-y: 50%; padding-left:10px;  
}
#divInscription form table td.msg_conf	{ color: #de0b32;  }
#divInscription form button.rond { background-position-x: calc(100% - 5px); }
#divInscription form table tr.confirme td.rond, #divInscription form.confirme button.rond { background-image: url(../img/rondvert.png); }
#divInscription form table tr.confirme button { display:none; }
#divInscription form table td div.lock { position:absolute; top:0; left:0; bottom:0; right:0; background:transparent; display:none; }
#divInscription form table tr.confirme td div.lock { display:block; }
#divInscription form table tr.confirme td input { pointer-events: none; position: relative; color: grey; }

#divInscription form div#confirmation_inscription {
	position:absolute; border:none; overflow:auto; display:none; z-index:85;
	background-image: linear-gradient(to top, #Ffffff 32%, #FcFcFc 93%);
    border-radius: 5px;	box-shadow: 0px 0px 10px #2b2b2b;
	padding: 5%; left:5px; top:5px; right:5px; bottom:5px;
	vertical-align:middle; text-align:center;
}
#divInscription form.confirmation_inscription div#confirmation_inscription { display:block; }
#divInscription form div#confirmation_inscription input {  margin:5%; padding:10px; width:90%; text-align:center; }
#divInscription form input[name="acompte"] {   vertical-align: middle; text-align:right; width:10px;  height: 10px;}


#divInscription form table tr.conf_email , #divInscription form table tr.conf_tel { display:none; }
#divInscription.conf_email form table tr.conf_email	{ display:table-row; }
#divInscription.conf_tel   form table tr.conf_tel		{ display:table-row; }

#divInscription form.inclus, #divInscription form.inclus table {
    color: #2D2D2D;
    background-color: #ededed;
    font-family: Verdana, Arial, Helvetica, sans-serif;
	padding-top:0px;
}
button, input[type="checkbox"], input[type="radio"] { cursor:pointer; }
#divInscription form.inclus button { background-color: #D9534F; border-radius: 10px; }
#divInscription form.inclus img { display:none; }
#divInscription table { border-collapse: collapse; margin: 2% 5%;}

#divInscription	form table tr.localisation td { background-color: #FFF; color:#124483; font-size:small; text-align:center; width:25%; padding:0;}
#divInscription	form table tr.localisation td.legende{ 
	background-color: #124483;
    color: #FFF;
    border-radius: 25px;
    font-size: 1rem;
}

#divInscription	form table td button { border-radius:2.45em; width:100%;  }
#divInscription	form table tr.localisation td button {
	background-color:white; color: #d40551; font-weight: bold;
	margin:3px; 
}

#divInscription	form table tr.localisation td button[name="map"] {
	border-radius:50%; width: 30px; height:30px;    
	float:left;
	/* position: absolute; right: 3px; top: -5px;  */
}
#divInscription	form table tr.localisation td button[name="map"] img { height:90%; margin-left:-27%;}

#divInscription	form table td.map { padding:0; }
#map { display:none; height:230px; }
.showMap #map { display:block; }
.showMap #map .ol-viewport div { display:none; }
.showMap tr.cp_ville { height:5%;}
#divInscription tr.cp_ville input, #divInscription tr.cp_ville select { width:90%; margin-bottom:6px;}
#divInscription tr.cp_ville td { width:50%; }

.popup {
	position:absolute; border:none; overflow:auto; z-index:85;
	background-image: linear-gradient(to top, #Ffffff 32%, #FcFcFc 93%);
    border-radius: 5px;	box-shadow: 0px 0px 10px #2b2b2b;
	padding: 3%; right:10px; top:10px; bottom:10px; width:250px; /* width: 88%; height: 82%; */
	max-width:calc(100% - 20px);
}

.popup table td { cursor:pointer; }
.cnil	{ text-align:center; color:grey; font-size:40%; }
	
#divInscription form table th{
	font-family: 'Frontage Condensed Inline TheFontsMaster com';
	background-color: #00448d; 
	color:white; 
	padding:2%;
	font-size:1em;
}

#divInscription form table td.accord{
	font-size:0.75rem;
	color:#000;
}

#divInscription form table td.cnil{
	font-size:0.75rem;
	color:#333;
}

#divInscription form table[name="PartI"] input {
    width: 100%;
    background-color: #CCC;
    font-size: 1em;
    border-radius: 25px;
	border:none;
}
input:focus {
     outline:  none;
}
#divInscription form table[name="PartI"] input::selection {
	border:none;
}

#divInscription form table[name="PartI"] input[type="radio"] {
    width:10px;  
	height: 10px;
}

#divInscription form table[name="PartI"] td{
    color:#00448d;
	font-size:0.75rem;
	padding:3.5% 1% 0% 1%;
}

#divInscription form .inscription{
	background-color: #da1f26;
	color:#FFF;
	font-size:1rem;
	width:auto;
	font-weight:500;
	border-radius:25px;
}

#divInscriptionImage .photo{
	position: relative;
	width: 40%;
    padding-top: 2%;
    padding-left: 30%;
}

#divInscriptionImage .jeunes{
	width: 100%;
}

#divInscriptionImage .tache_rouge{
	position: absolute;
	width: 50%;
    top: -22%;
    left: 15%;
    transform: rotate(0.9turn);
}

#divInscriptionImage .plus_rouge{
	position: absolute;
	width: 15%;
	right: -21%;
}

#divInscriptionImage .plus_blanc{
	position: absolute;
    width: 15%;
    right: -22%;
    top: 5%;
}
#divInscriptionImage .rond_blanc_1{
	position: absolute;
    width: 12%;
    bottom: 6%;
    right: -6%;
    z-index: -1;
}

#divInscriptionImage .rond_rouge{
	position: absolute;
    width: 5%;
    bottom: 4%;
    right: -10%;
}

#divInscriptionImage .rond_blanc_2{
	position: absolute;
    width: 6%;
    bottom: -4%;
    right: -15%;
}

#divInscriptionImage .carre_rouge{
	position: absolute;
    bottom: 3%;
	left: -2%;
    width: 8%;
    transform: rotate(0.6turn);
}

#divInscriptionImage p{
	font-family: 'Frontage Condensed Inline TheFontsMaster com';
	text-align: center;
	color:#FFF;
	font-size:2.5em;
	font-weight: 600;
}

#divInscriptionImage .picto{
	font-family: 'Frontage Condensed Inline TheFontsMaster com';
	display:flex;
	flex-flow: row nowrap;
	justify-content: space-around;
}

#divInscriptionImage .picto div{
	width:28%;
	text-align:center;
}

#divInscriptionImage .picto div img{
	width:45%;
}

#divInscriptionImage .picto div p{
	margin:0;
}

footer .logo{
	position: fixed;
    bottom: 0;
    right: 30%;
	height: 75px ;
	width: 150px;
	margin: auto;
	border-radius: 75px 75px 0 0;
	background-color: #FFF;
	text-align:center;
	right:calc(50% - 75px);
}

footer .logo img {
    position: relative;
    bottom: 2px;
    width: 65%;
    transform: rotate(0.98turn);
}

#divInscription tr.offreWeb td img{
	cursor: pointer;
    display: inline-block;
    width: 100%;
}

#site_cerca{
	display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
}

.cadreInfo h4{
	margin-bottom: 0;
	    width: 90%;
}

.cadreInfo p{
	margin: 0;
	    width: 90%;
}

@media screen and (min-width: 425px) {
	#divInscription form table[name="PartI"] td{
		font-size: 1rem;
	}
	#divInscription tr.offreWeb td{
		font-size:1rem;
	}
	#divInscription form table[name="PartI"] input[type="radio"] {
		width:20px;
		height:20px;
	}
	#divInscription form input[name="acompte"]{
		width:20px;
		height:20px;
	}
}

@media screen and (min-width: 630px) {
	#divInscription form table th{
		font-size: 1.5em;
	}
	#divInscription form table[name="PartI"] td{
		font-size: 1.5em;
	}
	
	#divInscription tr.offreWeb td{
		font-size:1rem;
	}
}

@media screen and (min-width: 769px) {
	#divInscription form table th{
		font-size: 0.75em;
	}
	#divInscription form table[name="PartI"] td{
		font-size: 0.75em;
	}
	#divInscription form table[name="PartI"] input[type="radio"] {
		width:10px;
		height:10px;
	}
	#divInscription form input[name="acompte"]{
		width:10px;
		height:10px;
	}
	#divInscription tr.offreWeb td{
		font-size:1rem;
	}
	#divInscriptionImage p{
		font-size:1rem;
	}
}

@media screen and (min-width: 884px) {
	#divInscription tr.offreWeb td{
		font-size:1rem;
	}
	#divInscription form input[name="acompte"]{
		width:20px;
		height:20px;
	}	
	#divInscription form table td.accord{
		font-size:0.75rem;
	}
	#divInscription tr.offreWeb div.cadreInfo {
		font-size:0.85rem;
	}
	#divInscription form table td.cnil{
	font-size:1rem;
	}
	#divInscription form .inscription{
		font-size:2rem;
	}
	#divInscription form table #map{
		height:80%;
	}
	.popup{
		display:block;
	}
}

@media screen and (min-width: 900px) {
	#divInscription form table[name="PartI"] td {
		font-size: 1em;
		padding: 1% 4% 0 4%;
	}
	#divInscriptionImage p{
		font-size:1.5rem;
	}
}

@media screen and (min-width: 962px) {	
	footer {
		height: 45px;
		position: fixed;
		top: 10%;
	}
	#PageInscription{
		margin-top: 45px;
	}
}

@media screen and (min-width: 1110px) {	
	#MyRoad {
		width: 50%;
	}
}

@media screen and (min-width: 1020px) {
	div#divInscription.horizontal #formInscription{
		display: flex;
		flex-flow: row-reverse;
	}
	#PageInscription .ss_titres {
    width: 45%;
    margin-left: 45%;
    margin-bottom: 0;
	padding: 5px 0;
}
}



@media screen and (min-width: 1093px) {
	#divInscription form table[name="PartI"] td {
		font-size: 0.65em;
		padding: 1% 3% 0 3%;
	}
	#divInscription form table[name="PartI"] input[type="radio"] {
		width:10px;
		height:10px;
	}
	#divInscription tr.offreWeb div.cadreInfo {
		font-size: 1rem;
	}
	#divInscriptionImage p{
		font-size:0.9rem;
	}
	#divInscription form table td{
		padding:0;
	}
	#divInscription tr.offreWeb td img{
		width:70%;
	}
	#divInscription form table td.accord {
		font-size: 1rem;
	}
	#divInscription form table td.cnil {
		font-size: 1rem;
	}
	#divInscription form table th {
    font-size: 0.5em;
	}
	#divInscription form table[name="PartI"] input[type="radio"] {
		width:10px;
		height:10px;
	}
	#divInscription form .inscription {
		font-size: 1.25rem;
	}
	#divInscription form table tr.localisation td {
		font-size: 0.5rem;
	}
}

@media screen and (max-width: 1094px) {
	footer .logo {
		height: 50;
		width: 100;
		border-radius: 50px 50px 0 0;
		right: calc(50% - 50px);
	}
}





@media screen and (min-width: 1330px) {

	#PageInscription{
		heigt:auto;
	}
	#divInscription form table[name="PartI"] input[type="radio"] {
		width: 15px;
		height: 15px;
	}
	#divInscription form table td {
		padding: 0;
	}
	#divInscription tr.offreWeb td img{
		width:75%;
	}
	#divInscription form table th{
		font-size: 0.75em;
	}
	#divInscription form table[name="PartI"] td{
		font-size: 1rem;
	}
	
	#divInscription tr.offreWeb td{
		font-size:1rem;
	}
	#divInscriptionImage p{
		font-size: 1.25rem;
		margin-top: 1%;
	}
	#divInscriptionImage .picto{
		margin-top:1%;
	}
	#divInscription form table td.accord {
		font-size: 1rem;
	}
	#divInscription form table td.cnil {
		font-size: 1rem;
	}
}

@media screen and (min-width: 1517px) {
	#divInscription form table[name="PartI"] td{
		font-size: 1em;
	}
	#divInscription form table #map{
		height:101px;
	}
	#divInscription tr.offreWeb td{
		font-size:1.25rem;
	}
	#divInscription tr.offreWeb td img{
		width:75%;
	}
	#divInscriptionImage p{
		font-size: 1.25rem;
		margin-top: 5%;
	}
	#divInscriptionImage .picto{
		margin-top:1%;
	}
	#divInscription form table tr.localisation td, #divInscription tr.cp_ville input, #divInscription tr.cp_ville select, #divInscription form table tr.localisation td button {
		font-size: 0.75rem;
	}
	#divInscription form table[name="PartI"] input[type="radio"] {
		width:20px;
		height:20px;
	}
	#divInscription form input[name="acompte"]{
		width:20px;
		height:20px;
	}
}

@media screen and (min-width: 1707px) {
	#divInscription form table[name="PartI"] td{
		font-size: 1.3em;
	}
	#divInscriptionImage p{
		font-size: 1.75rem;
		margin-top: 1%;
	}
	#divInscription form table td.accord{
		padding: 3% 0 3% 0;
	}
	#divInscription form table td.cnil{
		padding: 2% 0 2% 0;
	}
	#site_cerca{
		padding: 3% 0 3% 0;
	}
}

@media screen and (min-width: 1821px) {
	#divInscription form input[name="acompte"]{
		width:30px;
		height:30px;
	}
	#divInscription form .inscription{
		font-size:2.5rem;
	}
	#divInscription form table th{
		font-size:1.25rem;
	}
	#divInscription tr.offreWeb td {
		font-size: 1.5rem;
	}
}

@media screen and (min-width: 2049px) {
	#divInscription form table tr.localisation td, #divInscription tr.cp_ville input, 
	#divInscription tr.cp_ville select, #divInscription form table tr.localisation td button{
		font-size:1.5rem;
	}
	#divInscription form table #map {
		height: 170px;
	}
	#site_cerca{
		font-size:1.5rem;
	}
}

@media screen and (min-width: 2732px) {
	#divInscription form table #map {
		height: 250px;
	}
	#divInscription form table[name="PartI"] td {
		font-size: 2rem;
	}
	#divInscription form table td.accord {
		font-size: 1.5rem;
	}
	#divInscription form table td.cnil {
		font-size: 1.5rem;
	}
	#divInscriptionImage p {
		font-size: 2.5rem;
	}
}


/* mobile/tablette horizontale */ 

.mobileDevice div#divInscription.horizontal #formInscription,
.tabletteDevice div#divInscription.horizontal #formInscription{
	display:flex;
	flex-flow: row-reverse;
}

.mobileDevice div#divInscription.horizontal #formInscription,
.tabletteDevice div#divInscription.horizontal #formInscription{
	display:flex;
	flex-flow: row-reverse;
}

.mobileDevice div#divInscription.horizontal #formInscription div,
.tabletteDevice div#divInscription.horizontal #formInscription div{
	width:90%;
}

.mobileDevice #divInscription form table td,
.tabletteDevice #divInscription form table td{
	font-size: 0.75rem;
}

.mobileDevice #divInscription form table input[type="radio"],
.tabletteDevice #divInscription form table input[type="radio"] {
    width: 10px;
    height: 10px;
}


.mobileDevice #PageInscription.horizontal .ss_titres ,
.tabletteDevice #PageInscription.horizontal .ss_titres {
    width: 45%;
    margin-left: 45%;
    margin-bottom: 0;
	padding: 5px 0;
}
/*
.mobileDevice div#divInscription.horizontal form table{
	width:50%;
	float:left;
}

.mobileDevice div#divInscription.horizontal form table[name="PartI"] td, .mobileDevice div#divInscription.horizontal form table th{
	font-size: 0.665rem;
}

.mobileDevice div#divInscription.horizontal form table[name="PartI"] input[type="radio"] {
    width: 10px;
    height: 10px;
}

.mobileDevice div#divInscription.horizontal form table[name="PartIII"]{
	width:100%;
}

.mobileDevice div#divInscription.horizontal tr.offreWeb span.radio {
    font-size: 2rem;
}

.mobileDevice div#divInscription.horizontal tr.offreWeb td, .mobileDevice div#divInscription.horizontal tr td.accord, .mobileDevice div#divInscription.horizontal tr td.cnil{
    padding:0;
}

.mobileDevice div#divInscription.horizontal tr.offreWeb td img {
    width:45%;
}

.mobileDevice div#divInscription.horizontal form .inscription {
    font-size: 1rem;
}

.mobileDevice div#divInscription.horizontal tr.offreWeb td {
	font-size: 1rem;
}

.tabletteDevice div#divInscription.horizontal form table{
	width:50%;
	float:left;
}
.tabletteDevice div#divInscription.horizontal form table[name="PartIII"]{
	width:100%;
}
.tabletteDevice div#divInscription.horizontal form table[name="PartI"] td, .tablette div#divInscription.horizontal form table th{
	font-size: 1rem;
}
.tabletteDevice div#divInscription.horizontal form table[name="PartI"] input[type="radio"] {
	width: 10px;
	height: 10px;
}
.tabletteDevice div#divInscription.horizontal tr.offreWeb span.radio {
	font-size: 2rem;
}
.tabletteDevice div#divInscription.horizontal tr.offreWeb td, .mobileDevice div#divInscription.horizontal tr td.accord, .mobileDevice div#divInscription.horizontal tr td.cnil{
	padding:0;
}
.tabletteDevice div#divInscription.horizontal tr.offreWeb td img {
   width:45%;
}
.tabletteDevice div#divInscription.horizontal form table[name="PartI"] td{
	font-size: 1.5rem;
	padding: 6% 1% 0% 1%;
}	
.tabletteDevice div#divInscription.horizontal tr.offreWeb td {
	font-size: 1.5rem;
}
.tabletteDevice div#divInscription.horizontal tr.offreWeb span.radio {
   font-size: 4rem;
}
.tabletteDevice div#divInscription.horizontal tr td.accord{
	font-size:1.25rem;
	padding:2%;
}
.tabletteDevice div#divInscription.horizontal tr td.cnil{
	font-size:1rem;
}
.tabletteDevice div#divInscription.horizontal form .inscription {
	font-size: 3rem;
}
.tabletteDevice div#divInscription.horizontal form table #map{
	height:150px;
}
.tabletteDevice div#divInscription form table[name="PartI"] td{
	font-size:1.75rem;
}