/* TYPO 
****************************************************************************************************/	

@font-face {
	font-family: 'Britannic';
	src: url('../fonts/BritannicBold.eot');
	src: url('../fonts/BritannicBold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/BritannicBold.woff') format('woff'),
		url('../fonts/BritannicBold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

/* GENERAL 
****************************************************************************************************/		

body {
  background: #213350;
}

a {
	color:yellow;
}

body, p , h1, h2, h3, h4, h5, h6, alert-box, label , .error, a.button, button, input, select {
  font-family: Signika, Tahoma, Helvetica, sans-serif;
  font-weight: 100;
  font-size: 18px;
}  

textarea {
  height: 80px;
}

.ghost {
  padding: 4px 8px;
  color:white;
  border-radius: 3px;
  border:1px solid rgba(255,255,255,.5);
  margin: 0  10px 0 0;
  float:left;
  transition:.5s all ease;
  font-size: 90%  
}

.ghost:hover {
  color:#213350;
  background: white;
}  

/* TYPO */
@font-face {
  font-family: 'Futura Lt BT Light';
  font-style: normal;
  font-weight: normal;
  src: local('Futura Lt BT Light'), url('futura_lt_bt_light-webfont.woff') format('woff');
}

h1, h2, h3, h4, h5, h6 {
   font-family: 'Futura Lt BT Light',Tahoma, Helvetica, sans-serif;
}

.radio input[type=radio] {
		float:left;
}

.radio span {
	
	padding: -4px 40px 0 0;
	margin: 0;
}



/* EN-TETE 
****************************************************************************************************/		
#header {

  background-size: cover;
  background-position: center center;
  height: 300px;
  overflow: hidden;
  width: 1000px;

  padding: 0;
  margin: 16px 0 0 0;
}

#header .splash {
	width: 1000px;
	height: 200px;
	position: absolute;
	top:70px;
	z-index: -100
}

#header-cover {
  background: url(/img/header-cover.png) no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 300px;
  margin-top: 0px;
 
}
#header h1 {
	font-family: Britannic;
	text-align: center;
	z-index: 1000;
	position: absolute;
	top:-10px;
	width: 100%;
	text-transform: uppercase;
	color:white;
	font-size: 48px;
	margin: 0;
	padding: 0;
}


#header h2 {
  display: none;
}

h3 {
  font-size: 3vw;
  margin: 100px auto;
  text-align: center;
  color:white;
}

#compte .menu, #encadrants .menu {
  margin: 10px auto;
}

.flex {
	display: flex;
	width: 100%;

	}

.flex .field.radio {
	display: block;
	width: 70%;

	}

.flex .field.radio .radio{
	display: block;

	}

	/* MOYEN */
  @media screen 
  and (max-width: 1024px) {
    #header {
	  	width: 100vw;
	  	 	height: calc(80vw * .3);
	  	margin: 0 10vw;

	  }  
	  
	  #header-cover {
	  	width: 100vw;
	  		height: calc(80vw * .3);
		}  
		
		#header h1 {
		  font-size: 18px;
		  top: 0;	
		}	
		
		#header .splash {
	width: 100vw;
	height: 200px;
	position: inherit;
  margin-top: -200px;


	
		}
  }
  
  	/* MOBILE */
    @media screen 
    and (max-width: 632px) {
      
      #header {
	      width: 100%;
	      height: 33vw;
        margin:0;
	      top:20px;
      }
      
		  #header-cover {
		  	width: auto;
		  	height: 33vw;
			} 
			
		#header h1 {
		  font-size: 18px;
		}				  
		
				#header .splash {
	width: 100vw;
					height: 30vh;
	/*height: 30vh;*/
	position: inherit;



	
		}     
      
    }
  

/* NAVIGATION 
****************************************************************************************************/	

#nav {
/*   background: rgba(0,0,0,.1); */
  box-shadow: 0px 10px 10px rgba(0,0,0,.3)
}

nav.top-bar {
  text-align:center;
}
section.top-bar-section {
  display: inline-block;
  margin-left: -92px;
}


nav.top-bar li  a {
  font-family: Britannic,Tahoma, Helvetica, sans-serif;
  font-size:  24px;  
  color:#f0f0f0;
  font-weight: bold;
}  

nav.top-bar li.sel a {
	color:yellow;
} 

nav.top-bar, .fixed top-bar.sticky, .contain-to-grid {
  background: transparent;
}

nav.top-bar-section ul li>a {
  background: transparent;
}

.top-bar-section ul li,
.top-bar-section ul li:hover a  {
  background: transparent;
}

.top-bar-section li.active:not(.has-form) a:not(.button),
.top-bar-section li.active:not(.has-form) a:not(.button):hover  {
  background: transparent;  
}

.top-bar-section li:not(.has-form) a:not(.button),
/* .top-bar-section li:not(.has-form) a:not(.button):hover, */
.top-bar-section li a:hover,
.top-bar-section li:hover { 
  background: transparent;
  }

	/* MOYEN */
  @media screen 
  and (max-width: 1024px) {
	  
	  nav.top-bar li  a {
		   font-size: 16px; 
		}  
		
		nav.top-bar.expanded {
			background: #333;
		}
		
		section.top-bar-section {
			margin-left: -5vw;
		}
		
		.top-bar-section li:not(.has-form) a:not(.button), .top-bar-section li a:hover, .top-bar-section {
			width: 100%;

		}
		
	}  

/* CONTENU 
****************************************************************************************************/	

#content {
  color:#f0f0f0;
  padding: 2em 0;
  background: rgba(255,255,255,0.04);
  line-height: 1.2em;
  min-height: 50vh;
}

.columns p {
  line-height: 1.2em;  
}

#content a:not(.ghost) {

}


.form-bloc {
  padding: 10px 20px 5px;
  margin: 20px 0 40px;
  border-radius: 10px;
/*   background: rgba(255,255,255,.1); */
}

.form-bloc:hover {
/*   box-shadow: 0px 2px 8px black */
}

.form-bloc.small {

  margin: 0 auto 50px;
}

.form-bloc.small form {
  width: 70%;  
  margin: 0 auto;
}

.form-bloc p {
  color:white;
  margin-bottom: 4px;
}

.button.back {
  float:left
}

.button-bar {
  text-align: right;
  margin-top: 30px;
}

#compte .button.save.success {
  background: yellow;
}

#content h3 {
  margin:0;
  text-align: left;
  margin: 0 0 2em 0;
  font-size: 24px;
  width: 100%;
  color:yellow;
  font-weight: bold;
    
}

#content h4 {
  color:yellow;
  font-weight: bold;
  margin-bottom: .5em;
}

#compte h5 {
  color:rgba(255,255,255,.5);
  font-weight: normal;
  margin: .5em 0;
  padding-top: 1em;
  font-size: 100%
}

#compte em {
  color:rgba(255,255,255,.5);
  font-size: 100%;
  display: block;
  margin-bottom: 1em;
  font-weight: 300;
  font-style: normal;
}

#compte .alert-box h6{
  color:white;
  font-weight: bold;
}

 label {
  color:white;
}

#compte button, #compte a.button {
  background:silver;
  color:#213350;
  font-weight: bold;
}


#compte button:hover, #compte a.button:hover {
  background:  yellow;
}

#compte .menu, #encadrants .menu {
  text-align: right;
}

#compte .menu a, #encadrants .menu a {
  color:white;
}

.error > label , .error > label > small {
  text-transform: none;
  font-weight: bold;
}

/* Enfants 
****************************************************************************************************/	

.child-item {
  margin-top: 0px;
  padding-top: 0px;
  border-top:1px solid rgba(255,255,255,.2);
  padding-bottom:20px;

}

.child-item .button {
/*
  float:right;
  padding: 4px 6px;
  margin: 0 0px 0 4px;
*/
}


.child-item .button.tool {
  width: 66px;
  padding: 4px 0px;
  float:left;
  margin: 0 0px 0 1px;
}

.child-item .button.tool.big {
  width: 150px;
}
.radio>label>label{
  width:33%;
  padding-left:20px;
  display: inline;
}

.child-button {
  display:block;
  width: 150px;
  height: 150px;
  border-radius:4px;
  background: white;
  margin: 54px 0 2px;
  color:black;
  font-size: 80%;
  text-align: center;
  font-weight: bold;
}

.medical-button {
  display:block;
  width: 150px;
  height: 22px;
  border-radius:4px;
  background: white;
  margin: 0px 0 10px;
  color:black;
  font-size: 80%;
  text-align: center;
  font-weight: bold;
  padding-top: 2px;
}

#encadrants .medical-button {

	float:right;
	  width: 172px;
	  height: 30px;
}

.medical-button:hover {
  color:black;
  background: yellow;
}

.medical-button i {
  color:red;
}


.child-button .caption {
  padding-top: 110px;
  width: 150px;
  height: 35px;
}

.child-button .caption:hover,
.child-button:hover .caption  {
  color:black
}

.child-button.fille {
  background: url(../img/enfant-bg-fille.png) no-repeat white;
  background-size: contain;
  background-position: center center;
  transition:.5s all ease;
}

.child-button.fille:hover {
  background: url(../img/enfant-bg-fille.png) no-repeat yellow;
  background-size: contain;
  background-position: center center;
}

.child-button.garcon {
  background: url(../img/enfant-bg-garcon.png) no-repeat white;
  background-size: contain;
  background-position: center center;
  transition:.5s all ease;  
}

.child-button.garcon:hover {
  background: url(../img/enfant-bg-garcon.png) no-repeat yellow;
  background-size: contain;
  background-position: center center;  
}

.child-button.empty {
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,1);
  line-height: 1.6em;
  font-weight: 100;
  font-size: 80px;
  text-align: center;
  transition:.5s all ease;
}

.child-button.empty:hover {
  background: yellow;
  color: #213350  
}

p.pending {
  color:rgba(255,255,255,.5);
}

.inscription-item{
  background: rgba(255,255,255,.1);
  border-radius:4px;
  margin: 0 auto 10px;
  padding: 8px;
  width: 100%;
  float:left;
}

.inscription-item.passed {
  opacity:.5;
}  

.download {
  font-size: 90%;
}

.download a {

  color:white;
}

#inscription_infos {
	color:yellow;
	font-style: italic;
	margin: 24px 0 24px;
}

/* ENCADRANTS 
****************************************************************************************************/		

#encadrants #content{
	background: #5579b1;
}

#encadrant_accepte_conditions {
	margin-bottom: 0;
	}

#login-encadrants {
	position: absolute;
	top:10px;
	right:10px;
	color:rgba(255,255,255,.5);
}

.role {
	color:yellow;
	font-weight: bold;
	float:right;
}

.no-result {
	margin: 50px auto;
	text-align: center;
}

#encadrants.inscriptions .button {
	margin-right: 10px;
}


#encadrants.dossiers_medicaux table {
	width: 100%;
}

.recherche {
	border: 1px solid yellow;
	padding-top: 4px;
	border-radius: 4px;
}

.recherche a.ghost {
/*
	color: #213350;
	border-color: #213350
*/ 
}

div.dossier_medical {
	background: white;
	border-radius: 8px;
	margin: 20px auto;
	padding: 10px;
}

.dossier_medical h2, #content  .dossier_medical h4, .dossier_medical p {
	color:#333;
}


.dossier_medical.encadrants th {
	width: 200px;
}

	/* MOYEN */
  @media screen 
  and (max-width: 1024px) {
    
    #login-encadrants {
	    top:0;
	    right:5px;
    }
    
  }


	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    #login-encadrants {
	    top:0;
	    right:5px;
    }
    
  }

/* Camps 
****************************************************************************************/

h2.site_titre {
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
}

#camps h2, h2 {
  color:yellow;
  font-size: 2vw;
  font-weight: 900
}

#camps table, #recherche table {
  width: 100%;
  border:0;
}

#camps table a, #recherche table a {
  color:yellow;
  font-weight: bold;
  background: none;
/*   padding: .5em 0; */
  margin: 0;
}

#camps table tr.even, #camps table tr.alt, #camps table tr:nth-of-type(even),
#recherche table tr.even, #recherche table tr.alt, #recherche table tr:nth-of-type(even) {
  background: transparent;
}

#camps table tbody, #camps table, #camps table td.odd,
#recherche table tbody, #recherche table, #recherche table td.odd   {
  background: transparent;
}

#camps table td, #camps table tr,
#recherche table td, #recherche table tr {
  padding: 0;
  margin: 0;
  color:white;
}

#camps table td {
	padding: 1em .2em 0 0;
	font-size: 80%;
	vertical-align: top;
}

#camps .badge {
  text-align: center;
}

#camps .badge i{
  border-radius: 100px;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  font-size: 150%;
  background: yellow;
  text-align: center;
  display:block;
  color:#213350;
  margin: 0 auto;
}

#camps .row.item {
  margin: 50px auto;
}

.row.encadrants, .row.encadrants .columns, .row.encadrants p {
	padding: 0;
	margin: 0;

}

#camps .previsionnel {
	opacity: .5;
	}

.camps-item {
  margin: 20px auto;
  width: 100%;
  background: rgba(255,255,255,.1);
  border-radius: 8px;
  display: block;
  color:#f0f0f0;
  transition: .5s all ease;
  float:left;
  width: 100%;
  overflow: hidden;
}

.camps-item .gutter {
	padding: 8px 8px  0 ;
}

.camps-item:hover  {
  color:#f0f0f0;  
  background: rgba(255,255,255,.2);
}

#accueil .camps-item:hover  {
  box-shadow: 0px 1px 4px black
}
  
.camps-item h5 {
  color:yellow;
  font-weight: 900;
  font-size: 140%
}  

.statut {
  padding: 2px 4px;
  border-radius:4px;
  font-size: 100%;
  margin: -1em 0 0 1em;
  color:white;
  top:-4em;
  float:right;
}

.statut.left {
	float:none;
	margin: 0;
	clear:both;
}

span.statut {
  margin-top: 0px;
}

#camps .galerie {
  width: 100%;
  float: left;
  margin: 20px auto;
}

#camps .galerie .picture img{
  width: 23vw;
  float:left;
  margin: 10px 10px 0 0
}  


.button-bar {
  width: 100%;
  float:left;
  margin: 20px auto;
}
#camps .ghost.yellow {
  background: yellow;
  margin: 20px auto;
  float:none;
  color:#213350;
  font-weight: 900;
  font-size: 120%;
}

#camps .other {
	text-align: center;
	margin: 1em 0;
}

#souvenirs {
  margin: 4em 0 1em;

}

#souvenirs a {
  padding:  0 .5em 0 0;
  color:white;
}

#souvenirs a.selected {
  color:yellow;
  font-weight: bold;
}  

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    #camps h2, h2 {
      font-size: 16px    
    }
  }

/* Nouvelles 
****************************************************************************************************/		
.nouvelle-item {
	margin: 0 0 1em 0;
	font-size: 90%;
  color:silver;	
}

.nouvelle-item h5 {
  font-weight: bold;
  color:yellow;
  margin: 0 0 .1em;;  
}	

.nouvelle-item h6 {
  font-weight: normal;
  font-size: 80%;
  text-align: right;
  color:silver;
  margin: 0 0 .5em;;
}	

/* JOURNAUX 
****************************************************************************************************/	
.journal-item {
	width: 100%;
	float:left;
	margin: 40px 0 0px 0;
}

.journal-item a {
	color:yellow;
	text-decoration: underline;
}

.journal-item .couverture {
	width: 60px;	
	float:left;

}

.journal-item  img {
	width: 80px;	
	float:left;
	margin: 0 10px 0 0;
  box-shadow: 0px 1px 4px black	
}

/* Liens 
****************************************************************************************************/	
#liens h2 {
	font-size: 24px;
}

.lien-column {
	width: 33%;
	float:left;
	padding: 0 10px;
}

.lien-item {
	margin: 12px auto 36px;
}

.lien-item p {
	margin: 0;
	font-size: 90%;
}

.lien-item a {
  color:yellow
}	

.lien-item img {
  max-width: 200px;
  margin: 4px 0;
}	

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    .lien-column {
			width: 33%;
			float:left;
			padding:  10px 0;
		}
    
  }

/* Pied de page 
****************************************************************************************************/		
#footer {
  background: rgba(0,0,0,.2);
  font-size: 80%;
  color:rgba(255,255,255,.8);
  padding: 40px 0;
  box-shadow: 0px -10px 10px rgba(0,0,0,.1)  
}

#footer h4 {
  font-weight: 900;
  color:rgba(255,255,255,.8);
  text-align: left;
}

#footer a {
  color:rgba(255,255,255,.2);  
}

#footer a:hover {
  color:white;
  text-decoration: underline;
}

#footer i.big {
  color:rgba(255,255,255,.7);
  font-size: 300%;
}

.credits {
  padding: 50px 0 20px;

  text-align: right;
  color:rgba(255,255,255,.2);
}


/* QUESTONNAIRE SATISFACTION 
****************************************************************************************************/	
#questionnaire_satisfaction table {
	width: 100%;
}

#questionnaire_satisfaction table {

}

#questionnaire_satisfaction th  {
	width:70%;
	font-size: 150%;	
}

#questionnaire_satisfaction th strong {

}


table.participants {
	width: 100%;
	background: transparent;
	border:0;
}

table.participants tr, table.participants td {
	background: transparent;
	border:0;
	color:white;
	}




/* CONSTRUCTION 
****************************************************************************************************/	
#construction {
  padding: 13vw 0;
  text-align: center;
  font-size: 30px;
  color:rgba(255,255,255,.4);
  text-transform: uppercase;
  font-weight: 100;
}


.print-header  h2{
	display: flex;
	justify-content: space-between;
	border-bottom:2px solid yellow;
	margin-bottom: 2em;
	padding: 0;
	}

.print-header strong {
	margin:  0;
	padding: 0;
	}

.print-header small {
	margin: 0;
	padding: 0;
	color:yellow;
	font-size: 50%;
	}

.do-not-print {
	 background-color: yellow;
	color:black;
	font-weight: bold;
	padding: .2em .5em;
	border-radius: 6px;
	}

.refuse {
	background-color: red;
	color:            white;
	text-align: center;
	}

.authorise {
	text-align: center;
	}