@font-face {
    font-family: 'policePOPP';
    src: url('../font/324F87_1_0.eot');
    src: url('../font/324F87_1_0.woff') format('woff'),
         url('../font/324F87_1_0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: white;
    font-family: 'Georgia', sans-serif;
    /*margin-left: 2em;*/
}
            
.step {
     margin-top: 5em;
     margin-bottom: 5em;
}

/*
*       Assets
*/

.mb-10 {
    margin-bottom: 10px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-25{
		margin-top:25px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mt-60 {
    margin-top: 60px;
}

.mt-75 {
    margin-top: 75px;
}

.mt-100 {
    margin-top: 100px;
}

.mr-100 {
    margin-right: 100px;
}

.ml-100 {
    margin-left: 100px;
}

.mb-80{
    margin-bottom: 80px;
}

.mb-100{
    margin-bottom: 100px;
}

.content-center{
    text-align: center;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.content-bold-italic{
		font-weight:bold !important;
		font-style: italic !important;
		color:black;
}

.content-blue-normal{
		color: #01A491;
}

.content-pink{
		color: #d99594;
}

span.emphase-b-u {
		font-weight: bold;
		text-decoration: underline;
		font-style: none !important;
}

.title{
		font-family: 'policePOPP';
		font-weight: normal !important;
}

 /*
 *      règles d'afichage des erreurs de valisation du formulaire
 */ 

.has-error{
     border-color: rgb(224, 31, 44) !important; 
     border-width: 2px !important;
}

.message-error{
		color: #e11e2c;
    font-weight: bold;
}
            
.radio-checkbox-group.has-error  {
     color: rgb(224, 31, 44) !important;
     font-weight: bold !important;
}

.radio.has-error, .checkbox-inline.has-error{
     color: rgb(224, 31, 44) !important;
     font-weight: bold !important;
}
            
.error-message, .error-submit {
      display: none;
      color: #e11e2c;
      font-weight: bold;
}

 /*
 *      règles d'afichage des boutons
 */ 
            
button {
    cursor: pointer;
}

btn:before
{
		float: left;
		width: 1em;
		text-align: center;
		font-size: 1.7em;
		margin: 0 0.5em 0 -1em;
		padding-right: 20px;
		pointer-events: none;
}

a.btn{
		cursor: pointer;
		font-family: 'Arial', sans-serif;
}

.btn {
    width: 270px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 12px;
    display: inline-block;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #FFF;
    border-radius: 4px;
    color: #FFF;
    font-weight: 700;
    box-shadow: 5px 3px 0 rgba(0,0,0,.15);
}

a:hover {
    top: 10px !important;
    left: 10px !important;
    box-shadow: 2px 2px 0 rgba(0,0,0,.15);
}

.btn.btn-rounded-20 {
    border-radius: 20px;
}

.btn.btn-green {
    background-color: #01A491;
}

.btn.btn-white{
    background-color: #dbdbdb;
    color: black;
    text-transform: uppercase;
}

.btn.style-alt{
    background-color: white;
    color:black;
    box-shadow: none;
}

img.img-btn{
		position:relative; 
		z-index:20; 
		margin:0px;
		height:16px;
}

.hide {
    display: none;
}

/*
*       HEADER
*/

header {
    background-color: #01A491;
}

div.logo{
	height:60px;
}

#header.position {
    -webkit-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
}

#header a.logo-alt{
    display: none;
}

#header.fixed-position {
    border-bottom: 1px solid #a59ea0;
}

#header.fixed-position a.logo-default {
    display: none;
}

#header.fixed-position a.logo-alt {
    display: inline-block;
}

#header.fixed-position {
    position: fixed;
    width: 100%;
    background: #fff;
    z-index: 9999;
    transform: none;
}

#header.fixed-position li a{
    color: black;
}

ul#menu-header li {
	display: inline;
	padding: 0 0.5em; /* Pour espacer les boutons entre eux */
}

ul#menu-header {
	list-style-type: none; /* Car sinon les puces se placent n'importe où */
	margin-top: 25px;
}

.banner div.link{
    text-align: right;
}

.banner a.link{
    text-decoration: none;
    text-transform: uppercase;
    color:white;
    padding-right: 10px;
    font-size:11px;
}

nav {
	float: right;
}

#menu-icon img{
    width:50px;
    height: auto;
}

a:hover#header{

	background-color: red;
	border-radius: 4px 4px 0 0;

}

/*
*       media queries header
*/
@media all and (max-width:800px){
    #logo-default{
        width: 200px !important;
        height: auto !important;
    }

    nav ul, nav:active ul { 
				display: none;
				position: absolute;
				padding: 20px;
				background: #fff;
				border: 1px solid #444;
				right: 20px;
				top: 60px;
				width: 65%;
				border-radius: 4px 0 4px 4px;
	}

    li {
				text-align: center;
        padding-bottom:10px;
				width: 100%;
				margin: 0;
	}

    ul#menu-header li {
        display: inline-block !important;
        text-align: center;
        padding-bottom:10px;
    }

    ul#menu-header {
        list-style-type: none; /* Car sinon les puces se placent n'importe où */
        margin-top: 0px !important;
        z-index:25;
    }

	  nav:hover ul {
				display: block;
		}
    #menu-header a{
        color: #01A491 !important;
    }
}



/*
*       PAGE ACCUEIL 
*/

/*
*       Titre
*/ 

div.row.title {
    background-color: #01A491;
}

h1.header-title {
    text-align: center;
    position: relative;
    width:60%;
    line-height:40px;
    font-weight: normal;
}

div.conteneur-vague-home{
	position:relative;
	background-color:#01A491;
	width:100%;
	height: 133px;
	padding:0 !important;
}
.vague-home{
	position:relative;
	z-index: 10;
	width:319px;
	display:block;
	margin-left: auto;
	margin-right: auto; 
	margin-top:-111px;
}
div.conteneur-vague{
	background-color:#01A491;
	width:100%;
	height: 133px;
	padding:0 !important;
}
.vague{
	z-index: 10;
	width:319px;
	display:block;
	margin-left: auto;
	margin-right: auto; 
}

.info-vague{
	color:white;
	width:120px;
	position:relative;
	z-index:12;
	margin:91px auto 0 auto;
	font-size:16px;
}

.title h1 {
    font-size: 36px;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
    color: #FFF;
    text-align: center;
}

h5#title-btn-inscription{
	font-weight: normal;
	font-size: 16px;
	margin-left: auto;
	margin-right: auto;
}

/*
*       Zone boutons vers formulaire inscription
*/

div.btn-inscription {
    text-align: center;
}

button#main-btn-en-ligne{
	margin-right:20px;
}

.btn-inscription h3 {
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
    color: #3E3E3E;
    padding-right: 60px;
    padding-left: 60px;
}

.btn-inscription h3:after {
    content: " ";
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #9a9a9a;
    width: 56px;
    text-align: center;
    margin-top: 10px;
}

.btn-inscription-sep {
    text-align: center;
}

/*
*      Ligne et "ou" 
*/

h4.line {
    border-bottom: 1px solid #9a9a9a;
    line-height: 0.1em;
    margin: 10px;
}

h4.line span {
    padding: 0 10px;
    background-color: #FFF;
    font-weight: 400;
}

p.text-info-15px{
	 font-size: 16px;
	 width: 100%;
	 color: #3b3b3b;
}

/*
*       Zone lien vers modification/annulation
*/

.modif-annul {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.modif-annul p:after {
    content: " ";
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #9a9a9a;
    width: 290px;
    text-align: center;
    margin-top: 30px;
}

#main-btn-modif, #main-btn-annul, #main-btn-modif-style-alt, #main-btn-annul-style-alt{
		margin-left:16% !important;
}


/*
*     Vidéo
*/

p.info-video{
		font-size:18px;
		line-height:1.4em;
}

#container-video{
		background-color: #F2F3F5;
}

#content-row-video{
	  width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

div.text-video{
	padding-right:30px;
}

h2#title-video{
	color:black;
	line-height: 30px;
	font-weight: bold;	
	padding-bottom:0px;
}

.row-video {
    padding-left: 100px;
    text-align: left;
}

.row-video h3 {
    padding-top: 100px;
    text-transform: uppercase;
}

iframe{
		border:0;	
}

.row-video h2:after {
    content: " ";
    display: block;
    margin-left: 0;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #9a9a9a;
    width: 60px;
    text-align: left;
    margin-top: 30px;
    margin-bottom: 30px;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*
*       Zone contenu informatif
*/
.rowinfo{
		max-width:992px;
		margin-right: auto;
	  margin-left: auto;
	  background-color:#FEFCFD;
}

.rowinfo p.info{
		font-size:18px;
		line-height:1.6em;
}

img.picto-info{
		height:65px;
		width:65px;
}

h4{
    margin-right: auto;
    margin-left: auto;
    line-height: 35px;
}

.img-accueil-info{
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

.rowinfo h4 {
    color: #01A491;
    width: 170px;
    font-size: 24px;
    text-transform: uppercase;
}

p.info, p#info-intro {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    font-size: 20px;
    color:#2d2d2d;
}

p#info-intro{
		text-align:center !important;
		line-height:30px;
		width:700px;
}


.rowinfo h5 {
    color: #01A491;
    text-transform: uppercase;
    height: 110px;
    font-size: 24px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

h2 {
    color: #01A491;
    text-transform: uppercase;
    width: 100%;
    font-size: 24px;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 30px;
}

.lien-bas h4 {
    font-size: 20px;
    color: black;
    width: 100%;
}

/*
*       media queries page accueil
*/

@media all and (max-width:800px) {
	
		.vague-home{
				margin-top:-100px;
		}
	
		.info-vague{
				margin-top:80px;
		}

    .row.title {
        padding-left: 5px !important;
        padding-right: 5px !important; 
    }
    .header-title{
        width:80% !important;
        font-size: 25px !important;
        font-weight: normal;
    }
		
		p.info{
				text-align:center;
		}
    #img-inscription-mobile{
        display:block;
    }
    #main-btn-en-ligne{
    		margin-right:0px !important;
    		margin-bottom:10px !important;
    }
    #img-annul-modif, #main-btn-deroul-modif{
        display: block;
    }
    #btn-modif-mobile, #main-btn-deroul-annul{
    		display: block; 		
    }
    #btn-annul-mobile{
    		display: block;
    }
    .row-video {
        padding-left: 0;
        text-align: center !important;
    }
    .row-video h2 {
        padding-top: 0;
        padding-right:0 !important;
    }
    .row-video .col-2 {
        width: 100%;
    }
    
    .row-video h2:after {
        margin-left: 38% !important;
        text-align: center;
    }
    .rowinfo {
        margin-left: 5px !important;
        margin-right: 5px !important;
        text-align: center !important;
    }
    .rowinfo p{
       width:100% !important;
    }

    .rowinfo h5 {
        height: 100% !important;
    }
    .img-accueil-info-mobile{
        display:block; 
    }
    h2,h4{
        font-weight: normal;
    }
    #menu-icon {
		display:inline-block;
	}
}


/*
*       FORMULAIRE
*/

div#etape-choix-refus, div#etape-confirmation{
	background-color:#F8F9FB;
}

.title-form{
    text-transform: uppercase;
    color: #01A491;
}

.form-identite{
	  font-size: 16px !important;
}

label.checkbox-refus{
		font-weight:bold;
}

h6{
    color: #B8B8B8;
    font-size: 11px;
}

.input-text {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    border: 1px solid #B8B8B8;
    border-radius: 50px;
    color: black;
    outline:none;
}

.error-red-border{
    border: 1px solid #DF0000;
}


input.input-text.prenoms{
    width: 20%;
    margin-left: 12px;
}

input.field-date-birth{
    width: 25%;
    margin-left: 10px;
}

input.field-city-birth{
    width: 35%;
    margin-left: 10px;
}

input.field-bp-cedex{
    width: 40%;
    margin-left: 10px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.field-cp-birth{
    width: 20%;
    margin-left: 10px;
}

div#relativeForImg, div#relativeForImg-modif{
    position:relative;
}

img.mini-icon {
    height: 20px;
    width: 20px;
}

span.tooltip {    
  	display: none;
		position: absolute;
		padding: 20px;
		background: #fff;
		border: 1px solid #444;
		right: 20px;
		top: 60px;
		width: 65%;
		border-radius: 4px 0 4px 4px;
}
span.tool2{
		left: 0px;
		top: 0px;
}

.form3 p {
    margin-top: 32px;
    margin-bottom: 50px;
    text-transform: uppercase;
}

label.radio, label.checkbox-inline{
		font-style: italic;
}

/*
*       Input file
*/

div.rect-file {
    content: " ";
    display: block;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #01A491;
    height: 300px;
    width: 580px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

div.rect {
    content: " ";
    display: block;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #01A491;
    height: auto;
    width: 800px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

label.info-recap{
    font-weight: bold;
}

.input-file-container{
    margin-top: 30px;
    margin-bottom: 30px;
}

.file-return{
    margin-top: 10px;
    margin-bottom: 10px;
}

.btn-add-file{
    position: relative;
    top: 0; left: 0;
}
.input-file-trigger {
  padding: 8px 12px;
  display: inline-block;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid #FFF;
  border-radius: 4px;
  color: black;
  font-weight: 700;
  box-shadow: 3px 3px 5px #949492;
  border-radius: 20px;
  background-color:#C0C0C0;
}
.input-file {
  position: absolute;
  top: 0; left: 0;
  width: 225px;
  padding: 14px 0;
  opacity: 0;
}


/* styles du retour visuel */
.file-return {
  margin: 0;
  font-style: italic;
  font-size: .9em;
  font-weight: bold;
}

/*
*       media queries form
*/

@media all and (max-width:800px) {
		input.prenoms, input.info-birth{
				width:100% !important;
				margin: 5px !important;
		}
		
    .form-refus div.col-offset-1-5,
    div.col-offset-2 {
        margin-left: 5px;
        margin-right: 5px;
    }
    .form-refus label.checkbox-inline {
        display: block;
        margin-left: 30px;
    }
    .form-file div.col-offset-1-5 {
        margin-left: 1px;
        margin-right: 1px;
    }
    
    #main-btn-next-step, #modif-btn-next-step, #annul-btn-next-step{
    		margin-bottom: 20px;
    }
}

/*
*       RECAP FORM INSCRIPTION
*/

#view-step-3-crea h3, #view-step-3-mod h3{
    text-transform: uppercase;
    color: #01A491;
}

/*
*       media queries header
*/
@media all and (max-width:800px){
	
    #refus-organes div.col-offset-1-5, #refus-tissus div.col-offset-1-5{
        margin-left:10% !important;
    }
    
    #recap-btn-modifier, #recap-mod-btn-modifier, #recap-btn-valider, #recap-mod-btn-valider{
    		margin-bottom:10px;
    }

}

/*
*       FORM MODIF
*/

#modif-info, #annul-info{
    padding-left: 5%;
    padding-right: 5%;
    font-weight: bold;
}
div.content-rect-info{
		padding:30px;
}
/*
*				ECRANS DE CONFIRMATION/VALIDATION
*/

h2.content-blue-bold{
	color: #01A491;
	font-weight: bold;
  text-transform: none;
}

h4 .footer.uppercase{
	color: black;
	text-transform: uppercase;
}


/*
*       FOOTER
*/

#footer, #footer-links{
	max-height:10000000; 
	max-width:1200;
}

#footer-popp{
    padding:0px !important;
}
#footer-logo-box, #footer-mobile-logo-box{
    background-color:#393C41;
    height:200px;
    padding:0px !important;
}

#logo-footer-popp{
	float:right; 
	padding:40px 60px 0 0;
}

span.info-footer{
	color: white;
	text-transform: uppercase;
}
span.info-footer:before{
		content: " ";
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #9a9a9a;
    width: 177px;
    text-align: center;
    margin-bottom: 10px;
}

.list{
		display:inline;
}

#liste-rsx{
		border-left-style:solid;
		border-left-width:1px;
		border-left-color:grey;
		padding-left: 25px;
}

.list:after {
    content: " ";
    margin-left: 20px;
    margin-right: 20px;
    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: grey;
}

.wrapper-link{
		float:left;
}

#footer-links{
    background-color:#22272B;
    height:200px;
    padding:0px !important;
}
#footer-logo{
    margin-top:10%;
    width:auto;
    height:auto;
    margin-left:40%;
}

img#youtube{
		vertical-align:middle;
}

 #liste-lien li,  #liste-lien a{
    display: inline-block !important;
    text-align: center;
    padding-bottom:3px;
    padding-right:20px;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-weight:bold;
    font-size:11px;
}

ul.footer-links {
    list-style-type: none; /* Car sinon les puces se placent n'importe où */
    margin-top: 0px !important;
}

.list li, .list a{
    display: inline-block !important;
    text-align: center;
    color: grey;
    text-decoration: none;
    margin-right: 5px;
    margin-left: 5px;
}

a.icon{
	width: 80px;
	height:30px;
}

/*
*			MEDIA QUERIES FOOTER
*/
@media all and (max-width:800px){
		#footer-popp{
				display:none; 
		}

		#footer-popp-mobile{
				display:block; 
		}
		
		#logo-footer-popp{
				padding:40px 25% 0 0;
		}
		
		#footer-mobile-links{
				background-color:#22272B;
   		  height:100%;
		}
		
		#liste-mobile-lien a{
				text-decoration: none;
    		text-transform: uppercase;
   		  color: white;
   		  font-size: 11px;
		}
		
		#liste-mobile-lien a:after {
		    content: " ";
		    display: block;
		    margin-left: auto;
		    margin-right: auto;
		    border-width: 0 0 1px 0;
		    border-style: solid;
		    border-color: #9a9a9a;
		    width: 9px;
		    text-align: center;
		    margin-top: 5px;
		}

		#list-mobile-fb-yt a, #list-mobile-fb-yt li{
				display: inline-block !important;
		    text-decoration: none;
		    color: white;
		    width: 30%;
		    margin-top:10px;
		    margin-right:20px;
		}
		a.icon img{
				width:80px;
		}
		#list-nav-mobile a{
		    text-align: center;
		    text-decoration: none;
		    color: grey;
		    font-size: 11px;
		}
		
		#holder-mobile-nav-links p{
				color: grey;
				font-size: 11px;
		}
		
}

/*
*		POP UP
*/
#pop-up{
		position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    top: 0;
    left: 0;
    display: none;
    z-index: 1500;
}
#pop-up-content {
  position: relative;
  top: 10%;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  text-align: center;
  color: white;
  background-color: #01A491;
  padding: 15px 20px;
  border: 1px solid #FFF;
  box-shadow: 5px 3px 0 rgba(0,0,0,.15);
  border-radius: 20px;
}
#pop-up-content a:hover{
	box-shadow:none;
}
#pop-up-content p.bold-content{
	font-weight: bold;
}
#close-pop-up{
	position:absolute; 
	right:13px;
	top:10px;
	cursor:pointer
}

@media all and (max-width:800px){
	#pop-up-content{
    width: 90%;
}
}

/*
*			Spinner
*/
#loading-indicator {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5) url('../images/Assets/spinner.gif') no-repeat center center;
    top: 0;
    left: 0;
    display: none;
    z-index: 1200;
}

#loading-indicator:after {
  position: fixed;
  top: 50%;
  width: 100%;
  margin-top: 20px;
  font-size: 16px;
  color: #aaa;
  text-align: center;
  content: "Chargement...";
}