html, body, #container{ height: 100%;text-align: justify; }
body > #container {height: auto; min-height: 100%; }

html,body{ font-family: 'Open Sans', sans-serif; font-size:1em; font-weight: 500; color:#2e2a2c; background:#fff; }
	
img, div, input, textarea, .btn, a {
	-webkit-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
	   -moz-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
		-ms-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
		 -o-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
			transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
}
body {overflow-x:hidden; }
.clearfix:after{ clear: both; content: " "; display: block; font-size: 0; height: 0; line-height: 0; visibility: hidden; width: 0; }

*{ outline:none !important; }


/*########################################################## OVERALL ####################################################################*/

.navbar-default{ background-color: #0d0d0d; border:none;}
.navbar { border-radius:0px; }
.navbar { min-height:107px; margin-bottom:0px; border:none; }
.navbar-brand{ font-family: 'Satisfy', cursive; color:#fff !important; font-size:3em; padding-top:45px; }
.navbar-brand strong{ letter-spacing:-2px; }

.navbar-default .navbar-nav > li > a { color: #e0e0e0; padding:50px 15px 35px 15px; font-size:0.9em; }
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { color:rgb(137, 163, 145); }

footer{ text-align:center; font-size:0.8em; background:#0d0d0d; color:#e0e0e0; padding:70px 0px 50px 0px; }
footer a:link, footer a:visited{ color:#e0e0e0; text-decoration:none; }
footer a:hover{ color:#9689a3; }

/*########################################################## HOME ####################################################################*/

div#presentation{ background:#1e3b42 url(../images/presentation.jpg) center center no-repeat; color:#fff; height:457px; }
div#presentation div.presentation--ordi img{ margin-top:30px; }
div#presentation h1{ font-weight:300; text-align: left; font-size:2em; padding-top:70px; line-height:1.4em; }
div#presentation div.lien{ padding-top:40px; }
div#presentation div.lien a:link, div#presentation div.lien a:visited{ border-radius: 4px; background-color: rgb(137, 163, 145); padding:25px 100px; color:#fff; font-weight:400; text-decoration: none; }
div#presentation div.lien a:hover{ background:#fff; color:#333; }
div#presentation input{ width:100%; border:none; border-radius:4px; background: #5a7073; color:#fff; font-size:0.8em; padding:8px 20px; }
div#presentation ::-webkit-input-placeholder { color:#fff; }
div#presentation ::-moz-placeholder { color:#fff; } 
div#presentation :-ms-input-placeholder { color:#fff; } 
div#presentation input:-moz-placeholder { color:#fff; }
div#presentation input.connexion{ color:#0d0d0d; }
div#presentation input.connexion:hover{ background:#fff; }
div#presentation div.motdepasseoublie{ font-size:0.7em; }
div#presentation div.motdepasseoublie a:link, div#presentation div.motdepasseoublie a:visited{ color:#fff; padding-right:22px; margin-top:5px; display:inline-block; }


div#commentcamarche{ padding-top:70px; padding-bottom: 80px; text-align: center; }
div#commentcamarche strong.numero{ font-family: 'Satisfy', cursive; text-align: center; font-size:2em; display: block; }
div#commentcamarche strong.numero span{ color:#fff; background: #9689a3; height:70px; width:70px; line-height:80px; display: inline-block; border-radius: 35px; }
div#commentcamarche h2{ text-align: center; font-size:1em; color:#2e2a2c; min-height:70px; font-weight: bold; }
div#commentcamarche img{ max-width:100%; margin-bottom:60px; }
div#commentcamarche div.commentcamarche--texte{ color:#5d6e62; text-align: justify; }

div#tarifs{ background-image: -moz-linear-gradient( 90deg, rgb(105,124,126) 0%, rgb(38,66,73) 100%, rgb(255,255,255) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(105,124,126) 0%, rgb(38,66,73) 100%, rgb(255,255,255) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(105,124,126) 0%, rgb(38,66,73) 100%, rgb(255,255,255) 100%); height:218px; color:#fff; }
div#tarifs div#flag{ background: url(../images/tarifs.png) top left no-repeat; height: 223px; margin-top:-11px; }
div#tarifs div.tarifs--accroche{ padding-top:50px; font-size:1.7em; }
div#tarifs div.tarifs--parrainage{ font-weight:bold; }

div#contact{ padding: 120px 0px 70px 0px; }
div#contact h2{ text-align: center; padding-bottom:70px; font-size:2em; font-weight:300; }

div#contact form .form-group{ margin-left:0px; margin-right:0px; }
div#contact form .col-sm-12, div#contact form .col-sm-6{ padding-left:0px; padding-right:0px; }
div#contact form .first{ padding-right:15px; }
#contactForm{ padding:0px 0px 0px 0px; }

div#contact .form-control{ background:#5a7073; border:solid 1px #5a7073; border-radius:4px; box-shadow: none; color: #fff; font-size:0.8em; padding:10px 22px; transition: none; height:auto; font-weight:400; }
div#contact .form-control:focus{ border:solid 1px #fff; box-shadow:none; }
div#contact ::-webkit-input-placeholder { color:#fff; }
div#contact ::-moz-placeholder { color:#fff; } 
div#contact :-ms-input-placeholder { color:#fff; } 
div#contact input:-moz-placeholder { color:#fff; }

#sendContact{ background:#89a391; border:none; color: #fff; border-radius:4px; font-size:1em; font-weight:400; padding:15px 22px; }
#sendContact:hover{ background: #9689a3; color: #fff; }

div#mentions{ color:#707070; font-size:0.7em; padding:80px 0px 0px 0px; text-align: center; }


div#inscription{ padding: 120px 0px 70px 0px; }
div#inscription h2{ text-align: center; padding-bottom:70px; font-size:2em; font-weight:300; }

div#inscription form .form-group{ margin-left:0px; margin-right:0px; }
div#inscription form .col-sm-12, div#inscription form .col-sm-6{ padding-left:0px; padding-right:0px; }
div#inscription form .first{ padding-right:15px; }
#inscription{ padding:0px 0px 0px 0px; }

div#inscription .form-control{ background:#5a7073; border:solid 1px #5a7073; border-radius:4px; box-shadow: none; color: #fff; font-size:0.8em; padding:10px 22px; transition: none; height:auto; font-weight:400; }
div#inscription .form-control:focus{ border:solid 1px #fff; box-shadow:none; }
div#inscription ::-webkit-input-placeholder { color:#fff; }
div#inscription ::-moz-placeholder { color:#fff; }
div#inscription :-ms-input-placeholder { color:#fff; }
div#inscription input:-moz-placeholder { color:#fff; }

#sendInscription{ background:#89a391; border:none; color: #fff; border-radius:4px; font-size:1em; font-weight:400; padding:15px 22px; }
#sendInscription:hover{ background: #9689a3; color: #fff; }

div#mentionsins{ color:#707070; font-size:0.7em; padding:80px 0px 0px 0px; text-align: center; }


/*########################################################## INTERIEUR ####################################################################*/
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover { color:rgb(137, 163, 145); background:none !important; }



div#intro{ padding:30px 0; color:#2e2a2c; }
div#intro div.intro{ color:#919191; font-size:1.3em; font-weight:300; line-height:1.3em; padding-bottom:40px; }
div#intro ol { counter-reset: count; } 
div#intro ol li { list-style-type: none; counter-increment: count;  margin-bottom:30px; }
div#intro ol li:before { content: counter(count); font-family: 'Satisfy', cursive; text-align: center; font-size:1.4em; background: #9689a3; height:40px; width:40px; margin:0px 20px 0px 0px; line-height:45px; display: block; float:left; border-radius: 20px; color: white; }

div#appli-content{ padding-bottom:80px; }

.panel-primary > .panel-heading + .panel-collapse > .panel-body { border-top-color: #fff; }
.panel-group .panel { margin-bottom: 0; border-radius: 0px; }
.panel-primary { border: none; }
.panel-heading { padding:17px 15px; border:none; border-top-left-radius: 0px; border-top-right-radius: 0px; }
.panel-primary > .panel-heading {  background-color:transparent; border:none; background-image: -moz-linear-gradient( 90deg, rgb(105,124,126) 0%, rgb(38,66,73) 100%, rgb(255,255,255) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(105,124,126) 0%, rgb(38,66,73) 100%, rgb(255,255,255) 100%); background-image: -ms-linear-gradient( 90deg, rgb(105,124,126) 0%, rgb(38,66,73) 100%, rgb(255,255,255) 100%); }
.panel-title { font-size:1.4em; font-weight:300; }

.btn-primary { color: #fff; background-color: #89a391; border-color: #89a391; padding:15px 50px; }
.btn-primary:hover{ background-color: #9689a3; border-color: #9689a3; }

.unfilled{
	background-color: #ffa2a2;
}

.unchecked{
	background-color: #BBFF22;
}
.recette{
	background-color: #83b7c4;
}