/* ==========================================================================
BODY
========================================================================== */
body {
	font-family:"Roboto", sans-serif;
	font-weight:300;
	font-size:16px;
	color:#000;
	-webkit-text-size-adjust:100%;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none;           /* Non-prefixed version */
 }

/* ==========================================================================
MARGINS
========================================================================== */
.top-buffer-lg {
	margin-top:80px;
}
.top-buffer {
	margin-top:40px;
}
.top-buffer-sm {
	margin-top:20px;
}
.top-buffer-xs {
	margin-top:10px;
}
.bottom-buffer-lg {
	margin-bottom:80px;
}
.bottom-buffer {
	margin-bottom:40px;
}
.bottom-buffer-sm {
	margin-bottom:20px;
}
.bottom-buffer-xs {
	margin-bottom:10px;
}
.height-buffer-lg {
	margin-top:80px;
	margin-bottom:80px;
}
.height-buffer {
	margin-top:40px;
	margin-bottom:40px;
}
.height-buffer-sm {
	margin-top:20px;
	margin-bottom:20px;
}
.height-buffer-xs {
	margin-top:10px;
	margin-bottom:10px;
}

/* ==========================================================================
FONT STYLES
========================================================================== */
a,
.btn-default {
	-webkit-transition-timing-function:ease;
	transition-timing-function:ease;
	-webkit-transition-duration:500ms;
	transition-duration:500ms;
	-webkit-transition-property:color, border-color, background-color, box-shadow;
	transition-property:color, border-color, background-color, box-shadow;
}
.btn-black {
    color:#fff;
    border:2px solid #000000;
    background:rgba(0,0,0,.6);
}
.btn-black:hover {
    color:#fff;
    background:rgba(0,0,0,.75);
}
.btn-default,
.btn-black {
	-webkit-transition-timing-function:ease;
	transition-timing-function:ease;
	-webkit-transition-duration:500ms;
	transition-duration:500ms;
	-webkit-transition-property:color, border-color, background-color, box-shadow;
	transition-property:color, border-color, background-color, box-shadow;
}
a:hover,
.btn-default:hover,
.btn-black:hover {
	-webkit-transition-duration:200ms;
	transition-duration:200ms;
}
a,
a:hover,
a:visited,
a:focus,
a:active {
	text-decoration:none;
}
a:hover,
a:active {
	color:#363940;	
}
h1, h2, h3, h4, h5 {
    margin:0;
	font-weight:700;
}
.normal {
	font-weight:300;	
}
.semibold {
	font-weight:500;	
}
.bold {
	font-weight:700;	
}
.heavy {
	font-weight:900;	
}
.text-small {
	font-size:.75em;
}
.text-white {
	color:#fff;
}

/* ==========================================================================
INPUTS
========================================================================== */
input, textarea {
	border-radius:6px;
}

/* ==========================================================================
LISTS
========================================================================== */
.fa-ul {}
	.fa-ul li {
		margin-bottom:10px;
	}
	.fa-ul li .fa-li {
		left:-2.14285714em;
	}

/* ==========================================================================
BACKGROUND COLOR
========================================================================== */
.bg-light {
	background:rgba(255,255,255,.65);
	font-size:1.6em;
}
.bg-dark {
	background:rgba(0,0,0,.65);
}

/* ==========================================================================
DEFINITIONS ANIMATE.CSS
========================================================================== */
section {
	overflow:hidden;
}
.animated {
	visibility:hidden;
}
.bounceIn,
.rubberBand,
.fadeIn,
.fadeInUp,
.fadeInDown,
.fadeInLeft,
.fadeInRight,
.flipInX {
	visibility:visible;
}

/* ==========================================================================
BUTTONS
========================================================================== */
.btn {
	width:100%;
	border-radius:6px;
}
	.btn .fa {
		margin-right:8px;
	}

/* ==========================================================================
ICON
========================================================================== */
.i-wrapper i {
	width:2.2em;
	line-height:2.2em;
	border-radius:2.2em;
	border:2px solid rgba(0,0,0,.1);
	background:rgba(0,0,0,.2);
	box-sizing:content-box;
}

/* ==========================================================================
FORM GROUP
========================================================================== */
#texte_non_renseigne {
	display:none;
}
.input-group .form-control {
	font-weight:700;
}
.input-group .form-control:last-child {
	background:rgba(0,0,0,.1);
	box-shadow:none;
	border:0;
	border-top-right-radius:6px;
	border-bottom-right-radius:6px;
}
.input-group-addon:first-child {
	background:rgba(0,0,0,.25);
	box-shadow:none;
	border:0;
	border-top-left-radius:6px;
	border-bottom-left-radius:6px;
}
	.input-group-addon i {
		color:#fff;
	}

/* ==========================================================================
CUSTOM FILE INPUT
========================================================================== */
#message-photo-texte {
	display:none;
}

.js .inputfile {
    width:0.1px;
    height:0.1px;
    opacity:0;
    /*overflow:hidden;*/
    position:absolute;
    z-index:-1;
}

	.inputfile + label {
		max-width:80%;
		text-overflow:ellipsis;
		white-space:nowrap;
		cursor:pointer;
		display:inline-block;
		/*overflow:hidden;*/
		padding:0.625rem 1.25rem;
	}

		.inputfile + label figure {
			width:100px;
			height:100px;
			border-radius:50%;
			background-color:rgba(0,0,0,.25);
			display:block;
			padding:20px;
			margin:0 auto 25px;
		}
		
		.inputfile + label figure.infinite {
			animation-iteration-count:infinite;
			-moz-animation-iteration-count:infinite;
			-webkit-animation-iteration-count:infinite;
		}

		.inputfile:focus + label figure,
		.inputfile.has-focus + label figure,
		.inputfile + label:hover figure {
			background-color:rgba(0,0,0,.6);
		}
		
		.no-js .inputfile + label {
			display:none;
		}
		
		.inputfile:focus + label,
		.inputfile.has-focus + label,
		.inputfile + label:hover {
			/* outline:1px dotted #000; */
			/* outline:-webkit-focus-ring-color auto 5px; */
			color:#fff;
		}
		
		.inputfile + label svg {
			width:60px;
			height:60px;
			fill:#fff;
			vertical-align:middle;
			margin-top:-0.25em;
			margin-right:0.25em;
		}
		

/* ==========================================================================
FORM VALIDATION ICON COLORS
========================================================================== */
.has-error .control-label,
.has-error .help-block,
.has-error .form-control-feedback {
    color:#fff;
}
.has-success .control-label,
.has-success .help-block,
.has-success .form-control-feedback {
    color:#fff;
}

/* ==========================================================================
PHOTO APERCU
========================================================================== */
.photo-apercu {
	width:200px;
	height:200px;
	border-radius:100%;
	border:6px solid;
}

/* ==========================================================================
MESSAGES INFORMATION NAV FIXED TOP
========================================================================== */
#centres_interet_restants,
.lien_actualisation {
	display:block;
	color:#fff;
	font-size:1em;
	line-height:1.3em;
	min-height:1.3em;
	margin:15px auto;
}
.lien_actualisation:hover,
.lien_actualisation:focus {
	color:#fff;
}
	.textes_boucle .textes {
		display:none;
	}
#ci_total, #ci_reste, #ci_validation {
	display:none;
}

/* ==========================================================================
LIGNE CENTRE D'INTERET
========================================================================== */
.ligne_centre_interet {
	padding-top:10px;
	padding-bottom:10px;
	border-radius:6px;
	margin-bottom:4px;
}
.ligne_centre_interet:nth-child(odd) {
	background:rgba(0,0,0,.4);
}
.ligne_centre_interet:nth-child(even) {
	background:rgba(0,0,0,.15);
}
	.ligne_centre_interet > div.text-left {
		font-size:.9em;
		line-height:1.4em;
		padding-left:0;
		padding-right:0;
	}
	.ligne_centre_interet .rating_container {
		font-size:1.2em;
		line-height:1em;
		padding-right:0;
		-webkit-transition-timing-function:ease;
		transition-timing-function:ease;
		-webkit-transition-duration:500ms;
		transition-duration:500ms;
		-webkit-transition-property:opacity;
		transition-property:opacity;
	}
	.ligne_centre_interet.inactive .rating_container {
		opacity:0;
	}
		.ligne_centre_interet .rating_container .rating-symbol {
			padding-left:2px;
			cursor:pointer;
		}
		.ligne_centre_interet.inactive .rating_container .rating-symbol {
			cursor:default;
		}
		.ligne_centre_interet .rating_container .rating-symbol-background {
			color:rgba(255,255,255,.5);
		}
		.ligne_centre_interet .rating_container .rating-symbol-background:hover {
			color:rgba(255,255,255,1);
		}
		.ligne_centre_interet .rating_container .rating-symbol-foreground {
			color:rgba(255,255,255,1);
		}
		.ligne_centre_interet .rating_container .efface-valeur {
			cursor:pointer;
			display:none;
		}

/* ==========================================================================
LIGNE PARTICIPANT
========================================================================== */
.ligne_participant {
	padding-top:10px;
	padding-bottom:10px;
	border-radius:6px;
	margin-bottom:4px;
	cursor:pointer;
	box-sizing:border-box;
	border:2px solid transparent;
}
.ligne_participant:nth-child(odd):hover,
.ligne_participant:nth-child(even):hover {
	border-color:rgba(0,0,0,.1);
	background:rgba(0,0,0,.5);
}
.ligne_participant:nth-child(odd) {
	background:rgba(0,0,0,.3);
}
.ligne_participant:nth-child(even) {
	background:rgba(0,0,0,.15);
}
	.ligne_participant > div.text-left {
		font-size:.9em;
		line-height:1.4em;
		padding-left:0;
	}
	.ligne_participant > div.text-left.identite_participant {
		padding-right:0;
	}
		.ligne_participant div.text-left .photo {
			width:100%;
			border-radius:100%;
			border:2px solid;
		}
		.ligne_participant div.text-left .infos_participant {
			line-height:1.1em;
			opacity:.7;
		}
	.ligne_participant > div.text-right {
		padding-right:0;
	}

/* ==========================================================================
JAUGE SVG
========================================================================== */
svg.matching {
	width:36px;
	height:36px;
	max-height:100%;
	/* height:1%; /* Hack pour prévenir l'insertion d'espaces au dessus et au dessous du svg sous iOS. Fonctionne bien sous iOS 9. */
}
svg.matching.big {
	width:100px;
	height:100px;
}
.strike {
	display: block;
	text-align: center;
	overflow: hidden;
}
    .strike > span {
        position: relative;
        display: inline-block;
    }
    .strike > span:before,
    .strike > span:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 9999px;
        border-top: 6px double #fff;
    }
    .strike > span:before {
        right: 100%;
        margin-right: 15px;
    }
    .strike > span:after {
        left: 100%;
        margin-left: 15px;
    }

/* ==========================================================================
LOGO
========================================================================== */
.logo-societe {
	position:relative;
}

/* ==========================================================================
PAGE 404
========================================================================== */
#error-page .fa-huge {
	font-size:10em;	
}

/* ==========================================================================
 FOOTER
========================================================================== */
section.footer {
	color:rgba(255,255,255,.7);
	font-size:.7em;
}

/* ==========================================================================
BACK TO TOP
========================================================================== */
.cd-top {
	display:inline-block;
	height:60px;
	width:60px;
	position:fixed;
	bottom:50px;
	right:50px;
	box-shadow:0 4px 10px rgba(0, 0, 0, 0.1);
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	background:#000 url(../images/cd-top-arrow.svg) no-repeat center 50%;
	visibility:hidden;
	opacity:0;
	border-radius:5px;
	-webkit-transition:opacity .3s 0s, visibility 0s .3s;
	-moz-transition:opacity .3s 0s, visibility 0s .3s;
	transition:opacity .3s 0s, visibility 0s .3s;
	z-index:10;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touchevents .cd-top:hover {
	-webkit-transition:opacity .3s 0s, visibility 0s 0s;
	-moz-transition:opacity .3s 0s, visibility 0s 0s;
	transition:opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
	visibility:visible;
	opacity:.5;
}
.cd-top.cd-fade-out {
	opacity:.5;
}
.cd-top:hover {
	background-color:#000;
	opacity:1;
}

/* ==========================================================================
RESPONSIVENESS
========================================================================== */
@media screen and (max-width:1199px) {
	svg.matching {
		width:56px;
		height:56px;
	}
}
@media screen and (max-width:991px) {
	svg.matching {
		width:36px;
		height:36px;
	}
}
@media screen and (max-width:767px) {
	svg.matching {
		width:60px;
		height:60px;
	}
	/* FOOTER */
	section.footer .copyrights, 
	section.footer .credits {
		text-align:center;
	}
	/* BACK TO TOP */
	.cd-top {
		height:30px;
		width:30px;
		right:15px;
		bottom:40px;
	}
}
@media screen and (max-width:519px) {
	svg.matching {
		width:46px;
		height:46px;
	}
}
@media screen and (max-width:439px) {
	svg.matching {
		width:36px;
		height:36px;
	}
}
@media screen and (max-width:339px) {
	svg.matching {
		width:30px;
		height:30px;
	}
}