/*
***********

CSS by Saillou.
for http://www.upyourprod.fr
Enjoy :)

**********
*/


/* Fonts */
@font-face {
    font-family: "German";
    src: url('font/German.eot');
}
@font-face {
    font-family: "German";
    src: url('font/German.ttf');
}
@font-face {
    font-family: "Write";
    src: url('font/write.eot');
}
@font-face {
    font-family: "Write";
    src: url('font/write.ttf');
}
@font-face {
    font-family: "Classic";
    src: url('font/Classic.woff');
}

@media (min-width: 768px) and (max-width: 991px) { /* Tablette */
	.text-center-sm {
		text-align:center;
	}
}


/* Debug */
.std {
    border:solid 1px black;
    background-color:rgb(60,220,60);
    
    border-radius:10px;
    text-align:center;
    min-height:50px;
    line-height:50px;
}
.std2 {
    border:solid 1px black;
    background-color:rgb(60,220,60);
    
    border-radius:10px;
    text-align:center;
    min-height:100px;
    line-height:100px;
}

/* Global */
* {
    margin:0;
    padding:0;
	outline-style: none;
}
.inline {
	display:inline;
}
.i-b {
	display:inline-block;
}

.invisible {
	display:none;
}
.img_movible {
	position:absolute;
}

.margin-bottom {
	margin-bottom:25px;
}
.margin-left {
	margin-left:30px;
}
.margin-auto {
	margin:auto;
}
.big-vertical-padding {
	padding:0 80px;
}
.big-margin-top {
	margin-top:70px;
}
.vertical-margin {
	margin-top:20px;
	margin-bottom:20px;
	display:inline-block;
}
.bit-vertical-margin {
	margin-top:13px;
	margin-bottom:13px;
}
.padding-left {
	padding-left:25px;
}
.padding-right {
	text-align:right;
	padding-right:25px;
}
.big-vertical-margin {
	margin-top:60px;
	margin-bottom:60px;
	display:inline-block;
}
.big-padding {
	padding:20px 50px 20px 50px;
}
.no-padding {
	padding:0;
}
.horizontal-padding {
	padding:0 40px 0 40px;
}

.text-center {
	text-align:center;
}
.text-justify {
	text-align:justify;
}
.align-left {
	text-align:left;
}
.align-right {
	text-align:right;
}
.big-br {
	line-height:50px;
}

.ajustement_centrage {
	position:relative;
	top:-5px
}
.medium {
	width:250px;
}
.small {
	width:50px;
}

.faux_lien {
	cursor:pointer;
}
.faux_lien:hover {
	text-decoration:underline;
}

.a_strong {
    text-transform:uppercase;
    font-size:1.0em; 
}
.bit_strong {
	font-size:1.3em;
}
.big_strong {
	text-transform:uppercase;
	font-size:2.0em;
}
.bit-big_strong {
	font-size:1.7em;
}
.strong_blue {
	color:#59c2ff;
}
.fade_blue {
	color:#65bbd4;
}
.white_blue {
	color:rgb(177,235,252);
}
.black {
	color:black;
}
.white {
	color:white;
}
.grey {
	color:#7d7d7d;
}
.slite-grey {
	color:#868787;
}
.light-grey {
	color:#BBBBBB;
}

.bk_white {
	background-color:white;
}
.bk_grey {
	background-color:#f0f0f0;
}

.img_contrainte {
	max-width:260px;
	border:none;
	margin:auto;
}
.img_bit_contrainte {
	max-width:80%;
	border:none;
}
.all_width {
	width:70%;
}

.italic {
	font-style:italic;
}
.space-letter {
	letter-spacing:0.2em;
}
.emphase {
	color:rgb(190,190,190);
	font-size:1.3em;
	letter-spacing:0.15em;
}
.bit_emphase {
	margin:auto;
	max-width:500px;
	letter-spacing:0.1em;
}

.h_tra {
	opacity:0.8;
}
.h_tra:hover {
	opacity:1.0;
}

.h_page {
    font-size:1.3em;
	letter-spacing:0.15em;
}
h4 {
	color:#A9A9A9;
	font-size:1.5em;
}
.upper {
	text-transform:uppercase;
}

.ul_large li {
	display:block;
	margin-bottom:30px;
}
a.glyphicon {
	color:rgb(240,240,240);
}
a.glyphicon:hover {
	color:red;
	text-decoration:none;
}
samp {
	background:black;
	color:white;
}

@media (max-width: 768px) {
	.big-br {
		line-height:35px;
	}
}

html {
	height:100%;
	overflow-x: hidden;
}
body {
    font-family:"Classic";
	height:100%;
}
.container {
    width:100%;
	min-height:90%;
    background-color:white;
}
@media (min-height: 700px) { /* > Zarbe*/
	.container {
		height:90%;
	}
}
header {
	
}

/* navbar accueil + log */
@media (min-width: 768px) { /* >= tablette */
    .navbar-text-toggle {
       display:none; 
    }
}
.navbar-text-toggle {
    margin-left:55px;
}
.nav-log {
    background-color:rgb(0,0,0);
    text-align:center;
    min-height:50px;
    line-height:50px;
    
    font-size:1em;
}

/* navbar accueil, ... */
.nav-log > .navbar-default {
    background:none;
    border:none;
    margin:0;
    padding:0;
}
.nav-log .nav-justified > li > a {
    margin:0;
    padding:0;
    color:rgb(255,255,255);
}
.nav-log .nav-justified > li > a:hover {
    background-color:rgb(0,0,0);
    color:rgb(90,162,165);
}
.nav-log .nav-pills > li.active > a,
.nav-log .nav-pills > li.active > a:hover,
.nav-log .nav-pills > li.active > a:focus {
    color: #fff;
    background-color: #79dcf9; /* 79dcf9*/
}
.nav-log .navbar-default .navbar-toggle {
    border-color:rgb(60,101,106);
}
.nav-log .navbar-default .navbar-toggle:hover,
.nav-log .navbar-default .navbar-toggle:focus {
    background-color:rgb(60,101,106);
}
.nav-log .navbar-default .navbar-toggle .icon-bar {
  background-color: #ddd;
}
.nav-log .navbar-default .navbar-toggle:hover .icon-bar {
  background-color: #111;
}
.nav-log  .navbar-text-toggle {
    color:rgb(255,255,255);
}

/* navbar login */
.nav-log .navbar-form {
    margin:0;
    padding:0;
}
.btn-connexion {
    color: #fff;
    background-color:#79dcf9;
}
.btn-connexion:hover {
    color: #DDD;
    background-color: rgb(90,162,166);
}
.form-control {
	max-width:30%;
}
@media (max-width: 768px) { /* smartphones */
	.form-control {
		max-width:100%;
	}
}

/* navtab recording, ...*/
.nav-tab {
    text-align:center;
    text-transform:uppercase;
    font-family:"Classic";
    font-size:1.2em;
    
    line-height:50px;
    background-color:#f0f0f0;
    padding-top:5px;
    padding-bottom:5px;
}
.nav-tab > .navbar-default {
    background:none;
    border:none;
    margin:0;
    padding:0;
}
.nav-tab .nav-justified > li > a {
    margin:0;
    padding:0;
    color:#4f4f4f;
}
.nav-tab .nav-justified > li > a:hover {
    background-color:#AfAfAf;
    color:#fff;
}
.nav-tab .nav-pills > li.active > a,
.nav-tab .nav-pills > li.active > a:hover,
.nav-tab .nav-pills > li.active > a:focus {
    color: #FFF;
    background-color: rgb(81,81,81);
}
.nav-tab .navbar-default .navbar-toggle {
    border-color:rgb(60,101,106);
}
.nav-tab .navbar-default .navbar-toggle:focus {
    background-color:#fff;
}
.nav-tab .navbar-default .navbar-toggle:hover {
    background-color:#4f4f4f;
}
.nav-tab .navbar-default .navbar-toggle .icon-bar {
  background-color: #111;
}
.nav-tab .navbar-default .navbar-toggle:hover .icon-bar {
  background-color: #fff;
}
.nav-tab  .navbar-text-toggle {
    color:rgb(0,0,0);
}

/* ** Espace Membre ** */
/* navtab membre */
.nav-membre {
    text-align:center;
    text-transform:uppercase;
    font-family:"Classic";
    font-size:1.2em;
    
    line-height:50px;
    background-color:#525252;
    padding-top:5px;
    padding-bottom:5px;
	
	border-top:medium #AAAAAA solid;
}
.nav-membre > .navbar-default {
    background:none;
    border:none;
    margin:0;
    padding:0;
}
.nav-membre .nav-justified > li > a {
    margin:0;
    padding:0;
    color:#cccccc;
}
.nav-membre .nav-justified > li > a:hover {
    background-color:#828282;
    color:#fff;
}
.nav-membre .nav-pills > li.active > a,
.nav-membre .nav-pills > li.active > a:hover,
.nav-membre .nav-pills > li.active > a:focus {
    color: #FFFFFF;
    background-color: rgb(150,150,150);
}
.nav-membre .navbar-default .navbar-toggle {
    border-color:black;
   background:#454545;
}

.nav-membre .navbar-default .navbar-toggle:hover {
    background-color:#4f4f4f;
}
.nav-membre .navbar-default .navbar-toggle .icon-bar {
  background-color: #111;
}
.nav-membre .navbar-default .navbar-toggle:hover .icon-bar {
  background-color: #999999;
}
.nav-membre  .navbar-text-toggle {
    color:white;
}

.nav-membre .navbar-header .navbar-brand { /* Titre du bloc */
	cursor:context-menu;
	color:#EEEEEE;
	font-size:1.1em;
}
.nav-membre .navbar-header .navbar-brand:hover {
	color:#EEEEEE;
}

.accueil_titre {
	margin-top:35px;
	margin-bottom:35px;
	margin-left:5%;
	width:90%;
	padding:10px 0;
	border-bottom:1px rgb(180,180,180) solid;
}
.accueil_titre h2 {
	font-size:1.9em;
	margin-top:20px;
}

#espace_left {
}
.commandes_display {
	list-style:none;
	width:70%;
	margin:auto;
}
.commandes_display a {
	padding:10px 0 10px 20px;
	margin-top:5px;
	margin-bottom:5px;
	color:#696969;
	display:block;
}
.commandes_display .active {
	color:black;
	border:1px solid #DDDDDD;
	background:#F9F9F9;
}
.commandes_display a:hover {
	color:black;
	background:#FCFCFC;
	text-decoration:none;
}

#espace_middle {	

}
#espace_middle h3 {
	background:rgb(82,82,82);
	color:white;
	padding:10px;
	font-size:1.3em;
	margin-bottom:10px;
	
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	cursor:pointer;
}
#espace_middle h3:hover {
	background:rgb(100,100,100);
}
#espace_middle h3 .date {
	margin-left:10px;
	font-size:0.8em;
	color:rgb(121,220,249);
}
#espace_middle h3 .icone {
	float:right;
	margin-right:10px;
	color:rgb(121,220,249);
}


.item_espace {
	margin-bottom:20px;
}


.progression_display {
	padding:20px;
}
.progression_display .name {
	text-align:center;
	color:rgb(210,210,210);
}
.progression_display .numb {
	height:40px;
	width:40px;
	background-color:rgb(210,210,210);
	border-radius:40px;
	margin:auto;
}
.progression_display .active .name {
	color:black;
}
.progression_display .active .numb {
	background-color:rgb(121,220,249);
}

#espace_right {

}
#espace_right .avis_display {
	width:70%;
	margin:auto;
}
#espace_right .border-bottom {
	border-bottom:solid 1px #545454;
	margin-bottom:25px;
	padding-bottom:25px;
}

.form_mini input[type=radio] {
	display:block;
}
.form_mini input[type=submit] {
	display:block;
	padding-left:5px;
	padding-right:5px;
}
.form_mini label {
	display:block;
}

.bloc_titre{
	display:block;
	background:#525252;
	color:#EEEEEE;
	padding:10px;
	width:70%;
	margin:auto;
	margin-top:30px;
	margin-bottom:30px;
	text-align:center;
}
a.bloc_titre:hover {
	background:#828282;
	color:#FFFFFF;
	text-decoration:none;
}

/* Reservation */
#reservation {
	background:radial-gradient(circle at center center, rgb(230,230,230), white, rgb(230,230,230), white);
	margin-top:-10px;
	height:810px;
}
#reservation .ligne_noire {
	background:black;
	height:40px;
}
#presentation_logo {
	float:left;
	width:0px;
}
#reservation .presentation_img {
	float:left;
	margin-right:-100px;
	margin-top:-35px;
	margin-left:0px;
}
#reservation .presentation_img img {
	height:800px;
}

.pres_titre {
	font-size:1.9em; 
	padding-bottom:20px; 
}
.pres_content {
	font-size:1.2em; 
	letter-spacing:0.13;
}
.pres_emphase {
	color:rgb(200,200,200);
	letter-spacing:0.4em;
	margin-top:50px;
	margin-bottom:20px;
}

#reservation .presentation_img_ombre {
	float:left;
	margin-right:-100px;
	margin-top:-15px;
	margin-left:-20px;
	width:0;
}
#reservation .presentation_img_ombre img {
	height:750px;
}


#reservation .presentation_text {
	padding-top : 50px;
	padding-right : 300px;
	text-align:justify;
}
#reservation .presentation_text h1 {
	margin-bottom : 35px;
	letter-spacing:0.08em;
}
#reservation .presentation_text p {
	margin-bottom : 22px;
	letter-spacing:0.07em;
}

/* Carousel */
#canvas_diapo {
}

#wrapper_diapo {
	position:absolute;
}
#wrapper_diapo .active {
	display:block;
	position:absolute;
}
#wrapper_diapo .inactive {
	display:block;
	position:absolute;
}

/* Formulaires */
.form_arrondi label {
	margin-top:15px;
	padding-right:15px;
}
.form_arrondi input {
	border-radius:8px;
	border:solid 1px #CCCCCC;
	padding:10px;
	
    -moz-box-shadow: 0px 0px 2px 0px #CCCCCC;
    -webkit-box-shadow: 0px 0px 2px #CCCCCC;
    -o-box-shadow: 0px 0px 2px 0px #CCCCCC;
     box-shadow: 0px 0px 2px 0px #CCCCCC;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC;, Direction=NaN, Strength=2);
	
	background-image:url("../pic/content/fond_input.png");
	background-position:left bottom;
	background-repeat: no-repeat;
	background-size:100% 100%;
}
.form_arrondi input:focus {
    border:solid 1px #888888;
}
.form_arrondi textarea {
	border:none;
	padding:10px;

	background-image:url("../pic/content/fond_input.png");
	background-position:left bottom;
	background-repeat: no-repeat;
	background-size:100% 100%;
	
}
.form_arrondi textarea:focus {
    border:solid 1px none;
}
.form_arrondi .btn-connexion {
	border-radius:20px;
	height:50px;
	text-transform:uppercase;
	letter-spacing:0.14em;
}
.no-padding input {
	padding: 0 0 0 20px;
}

.form_formal {

}
.form_formal legend {
	width:100%;
	background-color:#525252;
	color:white;
	margin:15px 0 15px 0;
}

.form_formal ul {
	list-style:none;
}
.form_formal li {
	list-style:none;
	display:block;
	height:25px;
}
.form_formal li label {
	width:80%;
}


.form_formal label {
	display:inline-block;
	width:30%;
}
.form_formal .label_large {
	width:60%;
}
.form_formal .label_light {
	font-weight:100;
}

.form_formal input {
	display:inline-block;
	width:50%;
}
.form_formal input[type="radio"], input[type="checkbox"] {
	width:10px;
}

.form_formal .input_jour {
	width:12.5%;
}
.form_formal .input_mois{
	width:24.5%;
	height:40px;
	
	border-radius:8px;
	border:solid 1px #CCCCCC;
	padding:10px;
	
    -moz-box-shadow: 0px 0px 2px 0px #CCCCCC;
    -webkit-box-shadow: 0px 0px 2px #CCCCCC;
    -o-box-shadow: 0px 0px 2px 0px #CCCCCC;
     box-shadow: 0px 0px 2px 0px #CCCCCC;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC;, Direction=NaN, Strength=2);
}
.form_formal .input_annee{
	width:12.5%;
}

@media (max-width: 768px) {
	.form_formal .just-test {
		position:relative;
		top:-50px;
	}
}
.form_formal .just-test {
}

/* Le selecteur binaire :*/
.selecteur_binaire {
	display:inline-block;
	border-radius:7px;
	border:solid 1px #CCCCCC;
	list-style:none;
	
    -moz-box-shadow: 0px 0px 2px 0px #CCCCCC;
    -webkit-box-shadow: 0px 0px 2px #CCCCCC;
    -o-box-shadow: 0px 0px 2px 0px #CCCCCC;
    box-shadow: 0px 0px 2px 0px #CCCCCC;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC;, Direction=NaN, Strength=2);
	
	cursor:context-menu;
	padding:0 7px 0 7px;
}
.selecteur_binaire li {
	display:inline-block;
	width:70px;
	margin:0 -7px 0 -7px;
	height:25px;
	line-height:25px;
	border-radius:7px;
}
.selecteur_binaire .checked_g { /*gauche*/
	background-image:linear-gradient(90deg, #aee8f9, rgba(255,255,255,0.5));
}
.selecteur_binaire .checked_d {	/*droite*/
	background-image:linear-gradient(270deg, #aee8f9, rgba(255,255,255,0.5));
}

.selecteur_binaire .unchecked_d { /*droite*/
	background-image:linear-gradient(90deg, rgba(255,255,255,0.5), white);
	cursor:pointer;
}
.selecteur_binaire .unchecked_d:hover {
	background-image:linear-gradient(90deg, rgba(255,255,255,0.5), #f0f0f0);
	opacity:0.9;
}
.selecteur_binaire .unchecked_g { /*gauche*/
	background-image:linear-gradient(270deg, rgba(255,255,255,0.5), white);
	cursor:pointer;
}
.selecteur_binaire .unchecked_g:hover {
	background-image:linear-gradient(270deg, rgba(255,255,255,0.5), #f0f0f0);
	opacity:0.9;
}
/* __ */

/* Mid */
.mid {
    background:white;
}
.punchline {
	width:100%;
	margin:0;
	padding:0;
}
.punchline img {
    width:100%;
	margin-top:-8px;
}
.punchline_bas {
	width:60%;
	text-align:center;
	margin-left:20%;
	padding:0;
	margin-top:150px;
	margin-bottom:30px;
}
.punchline_bas img {
    width:100%;
	opacity:0.5;
}

/* Panier */
.panier {
	
}
.panier > .row > div {
	margin-top:3px;
	font-size:0.8em;
	line-height:1.5em;
	text-align:left;
	color:white;
	height:100%;
}
.panier a {
	color:#aaedff;
}
.panier img {
	width:40px;
	height:40px;
}
.panier #contain_img_panier img {
	position:absolute;
	top:0px;
	right:0px;	
}
.panier #nb_article {
	position:absolute;
	right:0px;
	top:25px;
	background:red;
	color:white;
	border-radius:20px;
	padding:0px 4px 0px 4px;
	cursor:context-menu;
}

/* Page panier */
.panier_promos-1, .panier_promos-2, .panier_promos-3 {
	border-radius:20px;
	width:66.6%;
	margin:auto;
	padding:10px;
	margin-bottom:15px;
}
.panier_promos-1 {
	background-color:#ecf3f4;
}
.panier_promos-2 {
	background-color:#ddf6fe;
}
.panier_promos-3 {
	background-color:#d2f4ff;
}

.bandeau-vertical {
	list-style:none;
	color:#8A8A8A;
	font-size:1.3em;
	margin-top:30px;
}
.bandeau-vertical li {
	display:block;
	margin-bottom:45px;
}
.bandeau-vertical span {
	position:relative;
	top:-20px;
	width:50px;
}
.bandeau-vertical p {
	position:relative;
	top:-10px;
	width:150px;
}


.panier_product {
	height:150px;
	margin:50px 0 50px 0;
	background:black;
}
.panier_product .presentation{
	display:inline-block;
	height:150px;
	width:60%;
	
	background-color:#ecf3f4;
	color:black;
}
.vignette {
	display:inline-block;
	max-height:150px;
	max-width:150px;
	position:relative;
	top:-35px;
}
.vignette img{
	height:150px;
	width:150px;
}
.text_product {
	display:inline-block;
	padding-left:15px;
}
.text_product h1{
	text-align:left;
	margin:0;
}
.text_product h3{
	text-align:left;
	margin:0 0 30px 0;
}

.panier_product .prix{
	display:inline-block;
	height:150px;
	width:39%;
	
	background-color:black;
	color:white;
	padding-left:10px;
}
.panier_product .prix h1{
	margin-bottom:20px;
	text-align:center;
}
@media (min-width: 768px) {	/* >= Tablettes */
	.panier_product .prix{
		float:right;
	}
}
@media (max-width: 768px) { /* Smartphones */
	.panier_product {
		background:white;
		height:300px;
	}
	.panier_product .presentation{
		display:block;
		width:100%;
	}
	.panier_product .prix{
		display:block;
		width:100%;
		margin-top:-22px;
	}
}

/* Page validation panier */
.left_panier_validation {
	margin-top:30px;
	margin-left:30px;
	margin-right:30px;
	padding:0;
}
.left_panier_validation h3 {
	padding-left:20px;
}
.left_panier_validation .left_container {
	padding:0 0px 20px 20px;
	margin-top:-10px;
}

.table_recap_product {
	color:white;
	background:#333332;
	margin-bottom:20px;
}
.table_recap_product th {
	width:25%;
	text-align:center;
	height:40px;
	font-size:1.2em;
	text-transform:uppercase;
}
.table_recap_product td {
	width:50%;
	height:40px;
}
.table_recap_product .table_td_pic {
	width:15%;
}
.table_recap_product img {
	height:80px;
	width:100%;
}

.left_panier_validation ul {
	list-style:none;
	padding-left:10px;
}

.hightlight {
	background:#abb5b8;
	display:block;
	width:100%;
	min-height:40px;
	line-height:40px;
	text-align:center;
	font-size:1.6em;
	color:white;
	text-transform:uppercase;
	margin:0;
}


.middle_panier_validation {

}
.form_grey{
	background:#f0f0f0;
	padding:0px 0 20px 20px;
	line-height:10px;
	margin-bottom:30px;
}
.form_grey h3 {
	padding-top:10px;
}
.form_grey label {
	font-weight:100;
}
.form_grey input {
	height:25px;
	padding-left:10px;
	border-radius:15px;
	border:solid 1px #CCCCCC;
	
    -moz-box-shadow: 0px 0px 2px 0px #CCCCCC;
    -webkit-box-shadow: 0px 0px 2px #CCCCCC;
    -o-box-shadow: 0px 0px 2px 0px #CCCCCC;
     box-shadow: 0px 0px 2px 0px #CCCCCC;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC;, Direction=NaN, Strength=2);
	
}
.form_grey .btn {
	height:25px;
	line-height:5px;
	border-radius:20px;
}

.bandeau-horizontal {
	color:#a4a4a4;
	list-style:none;
	display:table;
}
.bandeau-horizontal li {
	display:table-cell;
}
.bandeau-horizontal span {
	display:inline-block;
	padding:20px;
}

.right_panier_validation {
	background:#333332;
	margin:20px 0;
	color:white;
}
.right_l_panier_validation {
	background:#abb5b8;
	height:
}
.right_r_panier_validation {
	background:#333332;
	color:white;
}

#display_info_paiment {
	padding:20px;
}
.form_grey.grey_dark {
	background-color:#abb5b8;
	margin-bottom:20px;
}
.form_grey.grey_dark table{
	text-align:right;
}
.form_grey.grey_dark input{
}
.form_grey.grey_dark label{
	line-height:15px;
}
.validation_panier_table {
	margin:0;
	padding:0;
}

.container_button_right {
	text-align:right;
	margin-right:30px;
}

/* Content */
.content {
	margin:20px 0 0 0;
}
.content img {
	width:100%;
}
.content figcaption {
	color:rgb(50,50,50);
	letter-spacing:5px;
	margin-bottom:10px;
}
.content .mini_mix, .content .mini_mix img {
	width:170px;
	height:170px;
}

/* Section */
.section {
	background-color:white;
	padding-bottom:20px;
}
.section img {
	width:100%;
}
.section .border-left {
    border-left:1px rgb(150,150,150) solid;
}

.section .margin-top {
    margin-top:30px;
}
.section .margin-bottom {
    margin-bottom:30px;
}

.section article {
    text-align:center;
}
.section article h1 {
    color:black;
    text-transform:uppercase;
    font-size:2.1em;
	letter-spacing:0.2em;
}
.section article .h-left {
    text-align:left;
    padding-left:50px;
}

.section article p {
    text-align:justify;
    color:rgb(20,20,20);
}
.section article .p_center {
    text-align:center;
}

.section article strong {
    color:#9bd5f0;
    font-size:1.0em;
}
.section article .very_strong {
    color:rgb(147,219,227);
    font-size:3.3em;
}
.section article em {
    color:rgb(97,187,241);
    font-size:0.7em;
}

.section article ul {
    list-style-type:none;
}
.section article li {
    color:rgb(170,170,170);
}
.section article .li_black {
    text-transform:capitalize;
    color:black;
}
.section article a {
    color:rgb(180,180,180);
    text-decoration:none;
}
.section article .a_bleu {
    color:#9bd5f0;
    text-decoration:none;
}
.section article a:hover {
    color:rgb(120,120,120);
    text-decoration:underline;
}
.section article .separateur {
    color:rgb(97,187,241);
    font-size:2.1em;
}
.section article img {
    width:100%;
}

.mediatheque a {
	color:rgb(110,110,110);
	letter-spacing:1.3px;
}
.mediatheque a:hover {
	text-decoration:none;
	color:black;
}

/* Section online, design */
.section .presentation {
	text-align:center;
}
.section .logo {
	max-width:90px;
	max-height:40px;
	position:relative;
	top:-10px;
}

/* Section équipe */
.section .member {
    margin-top:50px;
}
.section .member img {
	width:100px;
	height:100px;
    border:1px solid black;
}
.section .equipe-right {
	background-image:url('../pic/equipe/fond-equipe.jpg');
	background-position:right bottom;
	background-repeat: no-repeat;
	height:600px;
}
.section .fond-equipe {
    margin-right:-30px;
}
.section blockquote {
  font-style:normal;
  font-family:"Segoe Print", "Times New Roman", Verdana;
}
.section .img_pres_wrapper {
    padding:30px;
}
.section .img_pres {
    -moz-box-shadow: 0px 0px 15px 0px #656565;
    -webkit-box-shadow: 0px 0px 15px 0px #656565;
    -o-box-shadow: 0px 0px 15px 0px #656565;
    box-shadow: 0px 0px 15px 0px #656565;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=15);
}
.equipe_sociale {
    height:200px;
    line-height:200px;
    text-align:center;
}
.equipe_sociale img {
    vertical-align:middle;
}

.title_block {
    display:inline-block;
    border:1px solid black;
    box-shadow: 0px 0px 15px 0px #656565;
    height:100px;
    line-height:90px;
    width:100px;
    text-transform:uppercase;
    color:rgb(100,200,255);
    font-size:1.3em;
    font-weight:800;
    margin-right:10px;
}

/* Section avec fond */
#extend_content {
	min-height:80%;
}
#fond_100 {
	min-height:100%;
}
@media (min-width: 992px) { /* >= tablette */
	.studio-A {
		background-image:url("../pic/studios/fond-studio-A.jpg");
		background-position:left bottom;
		background-repeat: no-repeat;
		background-size:60% 90%;
	}
	.studio-B {
		background-image:url("../pic/studios/fond-studio-B.jpg");
		background-position:left bottom;
		background-repeat: no-repeat;
		background-size:60% 90%;
	}
	
	.shooting {
		background-image:url("../pic/design/fond_shooting.jpg");
		background-position:left bottom;
		background-repeat: no-repeat;
		background-size:100% 100%;
	}
	
	.design_carte_logo {
		background-image:url("../pic/design/fond_carte_logo.jpg");
		background-position:right bottom;
		background-repeat: no-repeat;
		background-size:100% 100%;
	}
	.design_carte_flyers{
		background-image:url("../pic/design/fond_carte_flyers.jpg");
		background-position:left bottom;
		background-repeat: no-repeat;
		background-size:100% 100%;
	}
	.design_carte_depliant{
		background-image:url("../pic/design/fond_carte_depliant.jpg");
		background-position:left bottom;
		background-repeat: no-repeat;
		background-size:100% 100%;
	}
	.design_carte_reseau{
		background-image:url("../pic/design/fond_carte_reseau.jpg");
		background-position:left bottom;
		background-repeat: no-repeat;
		background-size:100% 100%;
	}
	.design_portfolio{
		background-image:url("../pic/design/fond_portfolio.jpg");
		background-position:right bottom;
		background-repeat: no-repeat;
		background-size:100% 100%;
	}
	
	.formation_designer{
		background-image:url("../pic/formation/designer.jpg");
		background-position:center;
		background-repeat: no-repeat;
		background-size:100%;
	}
	.formation_son{
		background-image:url("../pic/formation/son.jpg");
		background-position:left center;
		background-repeat: no-repeat;
		background-size:100%;
	}
	.formation_web{
		background-image:url("../pic/formation/web.jpg");
		background-position:left center;
		background-repeat: no-repeat;
		background-size:100%;
	}
}

/* Section Portfolio */
.portfolio_description_lg {
	color:white;
	position:absolute;
	top:45%;
	left:4%;
}
.portfolio_description h1 {
	line-height:80px;
	font-size:2.8em;
	letter-spacing:4px;
}
.portfolio_description strong {
	color:rgb(240,240,240);
	font-weight:100;
}
.portfolio_description em{
	font-style:normal;
	color:rgb(180,180,180);
}
.portfolio_description p {
	color:rgb(110,110,110);
	font-size:1.4em;
	letter-spacing:3px;
}
.portfolio_description_mobile h1 {
	color:white;
}
.btn-reservation {
	margin-top:15px;
	background-color:rgb(110,110,110);
	border-radius:3px;
	font-size:1.2em;
	letter-spacing:1.45px;
}
.btn-reservation:hover {
	background-color:rgb(130,130,130);
	color:white;
}

/* Section Beatmaking*/
#selecteur_cd {
	height:600px;
	overflow-y:scroll;
}

.detail_beat h1,h2,h3 {
	margin:0;
}
.detail_beat h1 {
	margin-top:20px;
}
.detail_beat h3 {
	margin-bottom:20px;
}

.detail_beat ul {
	list-style:none;
}

.detail_beat .caract {
	color:rgb(150,150,150);
	margin:30px 0;
}

.detail_beat .clear_beat {
	margin:55px 0;
}

.detail_beat .instru {
	list-style-type:circle;
	color:#59c2ff;
}

.detail_achat {
	width:60%;
	font-size:16px;
	letter-spacing:1.5px;
}

.btn-achat {
	margin-top:15px;
	background-color:rgb(130,130,130);
	color:rgb(250,250,250);
	border-radius:15px;
	font-size:1.2em;
	letter-spacing:1.45px;
}
.btn-achat:hover {
	background-color:rgb(160,160,160);
	color:white;
}

/* Section clips */
#wrapper_clip {
	background:black;
}
#clip {
	width:100%;
}
#clip_description {
	position:absolute;
	background:rgba(0,2,3,0.4);
	width:50%;
	margin-left:25%;
	color:white;
	text-align:center;
	letter-spacing:0.15em;
}
#clip_description h1{
	font-size:25px;
}
#clip_description p{
	font-size:17px;
	margin:40px 0;
}
#clip_description a{
	padding:15px 30px;
	font-size:18px;
	background:rgba(121,220,249,0.28);
	border-radius:20px;
	color:rgb(220,220,220);
	letter-spacing:0.2;
	display:block;
}
#clip_description a:hover{
	text-decoration:none;
	background:rgba(121,220,249,0.40);
	color:white;
}

/* Section design*/
.vertical-separation {
	height:20px;
	background:#333333;
}

/* Inscription-connexion */
.bloc_connexion {
	background-color:#525252;
	padding-top:20px;
	padding-bottom:20px;
}
.bloc_connexion a:hover {
	color:#CCCCCC;
	text-decoration:none;
}
.bloc_connexion .btn {
	margin:10px;
}
.bloc_inscription {
	background-color:#ecf3f4;
	padding-top:20px;
	padding-bottom:5px;
}

.bloc-io .btn {
	margin-top:20px;
}
.bloc-io label {
	display:inline-bloc;
	min-width:35%;
}
.bloc-io input {
	height:25px;
	min-width:60%;
}
.bloc-io img {
	width:100%;
	max-width:250px;
	min-width:100px;
}

.io-footer {
	margin-top:50px;
}
.io-footer ul {
	list-style:none;
	text-align:center;
	line-height:25px;
	letter-spacing:0.15em;
}
.io-footer li {
	text-transform:uppercase;
}
.io-footer .bd-right {
	border-right:solid 1px #454545;
}
.io-footer .bd-left {
	border-left:solid 1px #454545;
}

/* Bandeau étape */
.bandeau_etape {
	background:black;
	font-size:10px;
	font-size:1vw;
}
.bandeau_etape ul {
	display:table;
	width:100%;
	margin:2px;
	padding:3px;
	text-align:center;
}
.bandeau_etape li {
	display:table-cell;
}
.bandeau_etape li h1 {
	text-transform:uppercase;
	color:#666666;
	font-size:1.5em;
	letter-spacing:0.12em;
	margin:0;
}
.bandeau_etape li h2 {
	color:#666666;
	font-size:1.3em;
	margin:0;
}
.bandeau_etape .active h1 {
	color:#79dcf9;	
}
.bandeau_etape .active h2 {
	color:#79dcf9;
}

/* Online */
.article_online {
	text-align:justify;
	margin:auto;
	max-width:300px;
	font-size:1.15em;
	letter-spacing:0.12em;
}

/* Calendrier */
.calendrier {
	margin-top:10px;
	width:290px;
	border:black solid 1px;
	border-radius:20px;
	background-color:rgba(255,255,255,0.8);
	display:none;
}
@media (min-width: 992px) { /* > Tablette*/
    .calendar_right {
       float:right;  
    }
    .calendar_left {
       float:left;  
    }
    .calendar_middle {
       margin:auto;  
    }
}
@media (max-width: 991px) { /* <= Tablette */
    .calendrier {
       margin:auto; 
    }
}
.head_calendrier {
	text-align: center;
	word-spacing: 50px;
	height:50px;
	line-height:50px;

}

.table_calendrier th {
	background-color:#dcf2ff;
	text-align: center;
	cursor:context-menu;
}
.table_calendrier th, td {
	text-align: center;
}

.table_calendrier td {
	cursor:pointer;
}
.td_after {
	color:#999;
}

.table_calendrier .td_holiday {
	background-color:#edf8fc;
	cursor:context-menu;
	border-radius:0px;
}
.table_calendrier .td_holiday:hover {
	background-color:#edf8fc;
	border-radius:0px;
}

.table_calendrier .div_occuped {
	background-color:#79dcf9;
	color:white;
	border-radius:50px;
	cursor:context-menu;
}
.table_calendrier .div_occuped:hover {
	background-color:#79dcf9;
}

.table_calendrier .div_selected {
	background-color:white;
	color:black;
	border:solid 1px #79dcf9;
	border-radius:50px;
	cursor:context-menu;
}
.table_calendrier .div_selected:hover {
	background-color:white;
}

.foot_calendrier {
	margin-left:7px;
}
.button_book {
	text-align:center;
}
.button_fermer {
	float:right;
	margin-right:0 7px 3px 0;
	border-radius:50px;
}

.calendrier_prec, .calendrier_suiv {
	cursor:pointer;
}
.calendrier_prec:hover, .calendrier_suiv:hover {
	color:#66ccff;
}

/* Web */
.btn-web {
    color: #fff;
    background-color:#8eb3c2;
}
.btn-web:hover {
    color: white;
    background-color:#c2c2c2;
}
.form_arrondi .btn-web {
	border-radius:20px;
	height:50px;
	text-transform:uppercase;
	letter-spacing:0.2em;
}

/* Down */
@media (max-width: 768px) { /* smartphone */
	footer {
		text-align:center;
	}
}
footer {
    background-color:rgb(84,84,84);
    color:white;
    letter-spacing:0.12em;
}
footer h1 {
    font-size:1.2em;
}
footer h2 {
    font-size:1.0em;
    margin:0;
    padding:0;
}
footer p {
    margin:0;
    padding:10px;
    font-size:0.9em;
    color:rgb(200,200,200);
}
footer strong {
    color:rgb(92,199,255);
    font-weight:200;
}
footer .strong_reverse{
    color:white;
    font-weight:200;
}
footer ul {
    list-style-type:none;
}
footer  a {
    color:rgb(180,180,180);
    text-decoration:none;
}
footer a:hover {
    color:rgb(120,120,120);
    text-decoration:none;
}
footer img {
    display:inline-block;
    width:15%;
    border:none;
}
footer form {
    color:rgb(10,10,10);
}
footer .end {
    background-color:rgb(18,18,18);
    font-size:0.8em;
    text-align:center;
    padding:5px 0 5px 0;
}


/* Audio */
.audio_play:hover {
	opacity:0.6;
}
.audio_pause:hover {
	opacity:0.6;
}

.audio_content.audio_normal {
	margin-bottom:6px;
}
.audio_content.audio_normal .audio_play {
	height:35px;
	line-height:25px;
	padding-left:4px;
	padding-top:4px;
	width:35px;
	display:inline-block;
	cursor:pointer;
	color:rgb(144,213,254);
	font-size:25px;
	border-radius:27px;
}
.audio_content.audio_normal .audio_pause {
	height:20px;
	line-height:20px;
	width:20px;
	display:inline-block;
	cursor:pointer;
	color:rgb(144,213,254);
	font-size:25px;
}
.audio_content.audio_normal .audio_lecteur {
	height:20px;
	width:140px;
	line-height:20px;
	background:rgb(194,234,255);
	display:inline-block;
	color:white;
}
.audio_content.audio_normal .audio_lu {
	height:20px;
	width:0px;
	line-height:20px;
	background:rgb(194,234,255);
	border-right:white 4px solid;
	display:inline-block;
	color:white;
	margin-left:-140px;
}

.audio_content_mini {
	height:20px;
}
.audio_content.audio_mini .audio_play {
	height:20px;
	width:20px;
	display:inline-block;
	cursor:pointer;
	color:rgb(200,200,200);
	font-size:15px;
	border-radius:27px;
}
.audio_content.audio_mini .audio_pause {
	height:20px;
	width:20px;
	display:inline-block;
	cursor:pointer;
	color:rgb(200,200,200);
	font-size:15px;
}
.audio_content.audio_mini .audio_lecteur {
	height:10px;
	width:100px;
	background:rgb(200,200,200);
	display:inline-block;
	color:white;
	position:relative;
	top:5px;
	left:0px;
}
.audio_content.audio_mini .audio_lu {
	height:10px;
	width:0px;
	background:rgb(200,200,200);
	border-right:white 4px solid;
	display:inline-block;
	color:white;
	margin-left:-100px;
	margin-bottom:5px;
}

.preview_audio {
	cursor:pointer;
}

/* Chat */
#fenetre_chat {
	position:fixed;
	bottom:0px;
	right:0px;
	background-color:rgb(54,54,54);
	width:300px;
}

#reception {
	height:150px;
	overflow:auto;
	background-color:white;
	color:black;
	
	margin:20px 20px 5px 20px;
}
#reception ul{
	padding:10px;
	margin:0;
	
	list-style:none;
	text-align:justify;
}
#reception li {
	color:black;
}
#reception li strong {
	color:rgb(190,190,190);
}
#reception .li_admin strong {
	color:rgb(121,220,249);
}

#emission {
	margin:5px 20px 20px 20px;
}
#emission input {
	background-color:white;
	border:1px solid white;
	width:99%;
}

#action {
	background-color:black;
	height:50px;
	line-height:50px;
	color:rgb(121,220,249);
	text-align:center;
	
	cursor:pointer;
}
#action:hover {
	opacity:0.6;
}


/* ANIM : */
.conteneurAnimCouleur .animCouleur img{
	transition:all .3s cubic-bezier(.6,2,.4,1);
}
.conteneurAnimCouleur .animCouleur img:not(:hover) {
	filter: grayscale(1);
}

/* Erreur */
#wrapper_erreur {
	position:fixed;
	top:0;
	left:0;
	background:rgba(0,0,0,0.2);
}
#erreur {
	position:fixed;
	background-image:url('../pic/erreur/fond.png');
	color:white;
	padding:20px;
	padding-left:50px;
	border:2px grey solid;
}
#erreur:hover {
	opacity:0.95;
	cursor:pointer;
}
#erreur h1 {
	margin-bottom:25px;
}
#erreur .croix {
	float:right;
	cursor:pointer;
}
#erreur .croix:hover {
	color:red;
}


/* Sorry for the long post, here is a potato.

                                     .:::::::::.
                                  .:::::::::::::::.
                                 :::::::::::::::::::
                                :::::::::::::::::::::
                             :  `:::::::::::::::::::::
                            :: .. `:::::::::::::::'''  .::
                            :: `{:.,..````````...   .::''
                            `:::..``{{{CCC}}}''..:::''.
                   .,c$$h.    `'::::::.....:::''''.,c$$L
                  J$$$$$.?. ,d$=  `````.,   .zcc$$$$$$$$.
                ,$$$$$$$F."4P".:`:: ,$$".:::. "$$$$$$$$$h   ,cc,
               ,$$$$$P".,P." '',c `,d$$ `'``':.`$$$$$$$$$h ="3$$c.
              .$$$$$F $$" dc -?""? ?$$',c$$c  ` ?$$$$$$$$F, d$$$$h.
              J$$$$$$ $F ,$',""$$h.?$',,,,."" . `$$$$$$$$ d 3$$$$$$.
              3$$$$$P $F $$    ?$$'J',$" `$$c  $$$$$$$$$P $h "$$$$$$
               ?C'.,c$P $$$    J$$ J $F   $$$h $$$$$$$$$' $$$ $$$$$$h
                `??""  ,$$$ h,c$$F.$ $h, ,$$$',$$$$$$$$$c,`$P.$$$$$$$
                      ,$$$$c`??"",c, "$$$$$P',$$$$$$$$$$$h ?L'$$$$$$P
                      $$$$$$$F zd$$$h  """',d$$$$$$$$$$$$$h`?.`??$$P'
                     J$$$$P",c$$$$$$$h."$$$$$$$$$$$$$$$$$$$h. `??"'
     ,cd$$$$$$$$$$h J$$$$",J$$$$$$$$$$$c ?$$$$$$$$$$$$$$$$$$$
   ,$$???????$$$$$F.$$$$$ $$$$$$$$$$$$$$h`$$$$$$$$$$$$$$$$$$$h
  J$P"        `""" J$$$$$c`$$$$$$$$$$$$$F,$$$$$$$$$$$$$$$$$P"'
 d$"               J$??".  `??$$$$?????" $$$$$$$$$$$$$$$$$$ J$$$$$hcc,.
J$$                J" ,','  ;    , ,. . . `"?$$$$$$$$$$$$$$ $$$$$$$$$$$$c,
3$$                J ' } .{! ;! ;!;'!} - `!.  "?$$$$$$$$$$$.'$P??""""""?$$h
`$P",nmn        .   c ' ;!! ;!! !!! '!} !; {!.`;`$$$???$$$$$c,           ?$$
 ? uMMP ,nmnmdMMM'  3$c, `  ''' {!!''!!} !} `' ,c$$F nx.?$$$$$            $$
  dMM",dMMMMMMP"'   `$$$h.`  ,____,=  `. ' ,ccc$$$$h MMMx."??"           z$$
  MP nMMMMMMMM,      ?$$$$.`\ """"" ,-' .d$$$$$$$$$$c )MMMMMn.  ..     ,c$$P
  " =MMMMMMMMMMMbm,   ?$$$$h.``````',c$$$$$$$$?????"",dMMMMMMMb;MMr .z$$$P"
     "MMMMMMMMMMMMP'   ?$$$$$$$$$$$$$$$$$$$$$ nmMMMMMMMMMMMMMMP{MMM ?$$P"
      `MMMMMMM          "$$$$$$$$$$$$$$$$$$$$."4MMMMMMMMMMMMMMb`MMM.`"
       MM4MMMMx           "??$$$$$$$$$$$$$$$$$ccc= ,MMMMMMMMMMM "MM
       4Mr "4MMr               ""?????????????"",nmMMMMMMMMMMMMP  "
       `M    `"                $|c             4MMMPPP4MMMMMMP
                               $|$              "      MMMM"
                               $|$              ;!;   dMMP'
                           ,,, "|"              ;' {! P" ;{!
                      . . .  ...  -          `" , ;,,. -'!!!.
                     ''' '.;;;;;.         ,!' ." `-._``--..`'
                    ;;;;;..```..;;;{}   ''- ...;;;.   `~- ' ;;
                  .`''!!!!!!!!''''`.;; ;;;;;;..````''-;' ,;!!'
                  ''{;;......;;;;-'`   `'!!!!!!!!!!-- ,;!!'`
                       ```````        !!;,,.````.,,;{!!'`
                                       ```''''''''''``   */