/* Général */
.print {
	display: none
}
body {
	font-family: 'Open Sans', sans-serif!important;
	color:#333;
}

@media screen and (max-width:768px) {
body {
	padding-top: 7em;
}
}
figure img, .favoris-vignette img {
	display: block;
	width: 100%;
}
.favoris-vignette {
	margin-bottom: 10px;
}
.vertical-align {
	display: flex;
	align-items: center;
}
.separateur {
	margin-bottom: 2em
}

@media screen and (min-width:900px) {
.separateur {
	border-bottom: 1px solid #fb8b1d;
	max-width: 1140px;
	margin: 0 auto;
	min-height: 50px;
}
}
.tag-line {
	display: none;
}

@media screen and (min-width:768px) {
.tag-line {
	font-size: .9em;
	line-height: 1.125em;
	font-weight: 700;
	margin: 0;
	padding: 1em;
	display: inline-block;
	position: absolute;
	left: 6.5%;
	top: 150px;
}
.tag-line span {
	display: block;
}
}
.cache-ecran, nav h2, .media-sociaux-favoris span {
	position: absolute;
	left: -99999px;
	width: 0;
	height: 0;
	font-size: 0
}
.row {
	margin-bottom: 2em
}
footer {
	background: url("../images/interface/fond-footer.png") no-repeat center center;
	padding: 1em 0;
	color: #333;
	min-height: 80px;
	background-size: cover;
	text-align: right;
	font-size: 12px;
}
footer span {
display: block
}

footer div {
	max-width: 1170px;
	padding: 1em 15px!important;
	margin: 0 auto
}
@media screen and (min-width:600px){
	footer div {
	padding-left:0!important;
	padding-right:0!important;

}
}
@media screen and (min-width:768px) {
footer {
	background: url("../images/interface/fond-footer@2x.png") no-repeat center center;
	background-size: cover
}
	footer span {
display: inline
}
}
/* ************************************************* */



/* entete */
.entete-article {
	padding: 2em 0
}

.entete-article h1 {
	margin: 0 0 1em 0;
	font-size: 1.5em;
	color:#fb9b20;
	font-weight: 700;
}
@media screen and (min-width:768px){
.entete-article {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2em 0
}
	
.entete-article h1 {
	margin:0;
	width: 75%;
	font-size: 2em;
}
	}

.entete-article nav ul li {
	display: inline-block;
	margin-left: .5em
}
.media-sociaux-favoris {
	position: static;
	z-index: 0;
}
.media-sociaux-favoris a {
	font-size: 1.5em;
	transition: all .3s ease;
	border:1px solid #fff;
	padding: .2em;
	background-color:#fff;;	
}

 .media-sociaux-favoris a:hover,  .media-sociaux-favoris a:focus {
text-decoration: none
}
.media-sociaux-favoris .favorite-toggle-on{color:rgba(172,132,0,1);}
/* typo */
h1,h2,h3,h4{transition: all .3s ease;}

h2 {
	font-size: 1.2em;
	font-weight: 900;
	text-transform: uppercase;
	margin-top: 2em
}
h3 {
	font-size: 1em;
	font-weight: 900;
	text-transform: uppercase;
	margin: 2em 0 1em
}
h4 {
	font-size: .9em;
	font-weight: 900
}

@media screen and (min-width:768px){
	
h2 {
	font-size: 1.3em;
}
h3 {
	font-size: 1.1em;

}
h4 {
	font-size: 1em;

}
}
/* -------------------------- body-------------------------*/
body {
	padding-top: 40px
}

@media screen and (min-width:480px) {
body {
	padding-top: 40px
}
}

@media screen and (min-width:768px) {
body {
	padding-top: 80px
}
}

@media screen and (min-width:900px) {
body {
	padding-top: 0
}
}
/* Liste des points d'intérêts associés, dans detail-quartier et detail-personnage */
.boite{
	border:1px solid #d0d0d0;
	padding: 0 1em 1em;
	margin: 2em 0 ;
	position: relative;
}
.boite h2{
	margin: 0 0 .5em;
padding: .75em 0 .5em 2em;
}




.boite h2:before {
    content: '';
    width: 35px;
    height: 35px;
    position: absolute;
    left: -1px;
    top: -1px;
    background: #d0d0d0;
}

.boite h2:after {
     content: "\f0c1"; 
	font: normal normal normal 25px/35px FontAwesome;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 0;
    top: 0px;
    color: #fff;
    display: inline-block;
  
    text-align: center;
 
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	z-index: 2
}


.related-links a{display: flex; align-items: center; transition: all .3s ease; background: #fff; padding: 1em 1em 1em 0} 
.related-links a:hover{ background: #d0d0d0} 
.list-related-links {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: auto
}

.list-related-links li .photo {

	width: 75px;
	height: auto;
	margin-right: 15px;
}
@media screen and (min-width:480px) {
.list-related-links li .info {
display: flex;
align-items: center;	
}
	}
.list-related-links li .photo img {
	width: 75px;
	margin: auto
}

.list-related-links li {
	clear: both;
	overflow: auto;
	border-bottom: 1px solid #d0d0d0;
}
.list-related-links li:last-child {
	border-bottom: none;
}
.liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

@media screen and (min-width:768px) {
.liste {
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	-moz-column-gap: 60px;
	-webkit-column-gap: 30px;
	column-gap: 30px;
}
.favoris-vignette {
	margin-bottom: 0;
}
}
.liste h2 {
	font-size: 1em;
	font-weight: 700;
	line-height: 1.125em;
	margin-bottom: 0
}
.liste li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #d0d0d0;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid-column;
}
.liste li p {
	color: #777;
	margin: 0
}
.liste li img {
	width: 100px;
	
}
.liste li a {
	display: table;
	position: relative;
	padding: 1em 0;
	background: #fff;
	transition: all .3s ease;
}
.liste li a:after {
	content: "\f054";
	position: absolute;
	right: .1em;
	bottom: 1em;
	display: inline-block;
	font: normal normal normal 18px/1 FontAwesome;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	z-index: 2;
	color: #fff;
	font-size: 14px;
	line-height: 14px;
	text-align: center
}
.liste li a:before {
	position: absolute;
	right: 0;
	bottom: 1em;
	display: inline-block;
	content: "";
	background: #337ab7;
	z-index: 1;
	width: 16px;
	height: 16px;
}
.liste li .media-heading {
font-size: 1em}
.liste li .media-body {
	padding: 0 1em 0 1em
}
.liste li .media-body {
	padding: 0 1em 0 1em
}
.liste li a:hover {
	background: #d0d0d0;
	text-decoration: none;
}
.liste li .media-body h2+p {
	margin-bottom: 17px
}
.liste li .media-body p {
	font-size: 13px
}
.liste li .media-body p span {
	display: block;
}
.liste li .media-body p .adresse {
	color: #333
}
.liste li .media-body .distance {
	position: absolute;
	bottom: 1em;
	right: 25px;
	font-size: 12px;
}
/* ********************************************** */
/*information / resume */
.information{margin-bottom: 2em}
.information .container-information{border-top:1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; padding-top: 10px;}
.information p span:first-child{font-weight: 700; text-transform: uppercase; color:#888;  font-size:.8em}
.information>p:first-child span:first-child{color:#5bb222;}
.information p span{display: block;}

@media screen and (min-width:600px){
	.information p {display: flex;}
	.information p span {width:70%}
	.information p span:first-child {width:25%; margin-right: 5%;}
}

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

/* Carrousel d'images dans detail-quartier et detail-point-interet */
.carrousel {
	margin-bottom: 1em
}
.carrousel-link {
	color: #337ab7;
}
.carrousel-link {
	color: #337ab7;
}
.carrousel-link:hover {
	color: #23527c;
	cursor: pointer;
}

.slick-slide img {
	display: block;
	margin: 0 auto;
}
.slider-nav {
	padding: 10px;
	background-color: transparent;
}

.slider-nav{
	padding: 1em 0;
	border-top:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
}
.slider-nav img {
	display: block;
	width: 110px;
	height: 110px;
	border-radius: 0;
	border: 2px solid #fff;
	opacity: .6
}
.slick-arrow {
	width: 30px;
	height: 30px;
}
.slick-prev {
	left: 0;
	z-index: 100;
}
.slick-next {
	right: 0;
	z-index: 100;
}
.slick-prev:before, .slick-next:before {
	font-size: 25px;
}
.slider-nav .slick-current img {
	border: 3px solid #fb9b20;
	border-radius: 0;
	opacity: 1;
}
/* *************************  */


/* Onglets de contenu dans detail-point-interet */
.nav-tabs > li{height:40px; overflow: hidden}
.nav-tabs > li > a{ background-color: #fb9b20; color:rgba(0,0,0,.5); border-radius:0; transition: all .3s ease; font-weight: 700; }

.nav-tabs > li > a:hover {
    border-color: #fb9b20 #fb9b20 #fff;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    background-color: #fff;
    border-color: #fb9b20 #fb9b20 transparent #fb9b20 ;
	font-weight: 700;
	color:#000;

}

.nav-tabs > li > a:focus, .nav > li > a:hover{background: #fff; color:#000; }
.nav-tabs {
    border-bottom: 1px solid #fb9b20;
}
@media screen and (min-width:768px){
	.onglets {
	margin-top: 60px;
}}

.tab-pane h2, .panel-body h2 {
	display: none;
}
.tab-content{padding: 15px; border-color: transparent #fb9b20 #fb9b20 #fb9b20 ; border-style: solid ; border-width: 0 1px 1px ;}
.tab-detail-item {margin-bottom:1em}
.tab-detail-item:last-child {margin-bottom:0}
.tab-detail-item a{display: flex; padding: .5em 0}
.tab-detail-item a p{color:#333}
.tab-detail-item .photo{width: 50px; height: 50px; overflow: hidden; margin-right: 15px;}
.tab-detail-item .info{width:90%}
.tab-detail-item .photo img{width: 100%}
.tab-detail-item a:hover {text-decoration: none}
.tab-detail-item h3{margin-top:0; margin-bottom:.5em }

.panel-default > .panel-heading {
    color: rgba(0,0,0,0.5);
    background-color: #fb9b20;
    border-color: #fb9b20;
	border-radius:0;
	font-weight:700
}

.panel-group .panel{

    border-color: #fb9b20;
	border-radius:0;
}
.panel-group .panel + .panel {
    margin-top: 1px;
}
/* ********************** */
/* quiz */
.quiz{border:1px solid #d0d0d0; padding: 0 1em 1em; margin-top: 2em; margin-bottom:2em; position: relative}
.quiz h2{margin:0 0 .5em; padding: .75em 0 .5em 2em;  }
.quiz h2:after{ content: "?";width: 35px; height: 35px;position: absolute; left:0; top:-2px; color:#fff; display: inline-block;
 
  font-size: 35px;
text-align: center;	
	line-height: 35px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
.quiz h2:before{content:''; width: 35px; height: 35px;position: absolute; left:-1px; top:-1px; background:#d0d0d0 }



.feedback,.response{padding-left: 2em}
.recheck-choices{margin-left: 2em}

.error{color:#cc0000}
.bravo{color:#009900; font-weight: 900; text-transform: uppercase; margin-bottom: 0}


.map-icone:before{content:''; width: 35px; height: 35px;position: absolute; left:0px; top:0; background:#d0d0d0; z-index: 1 }
.map-icone:after{ content: "";width: 35px; height: 35px;position: absolute; left:0; top:0px; background:url("../images/interface/icone-map.svg") no-repeat center center; background-size: 25px; display: inline-block;z-index: 2
 
   }
.map-icone{position:relative}
/* ********************** */

/* Extrait vidéo dans detail-quartier */

.video-zone {
	margin-top: 15px;
}
.video-div {
	padding: 10px;
}
.video-div iframe {
	display: block;
	width: 100%;
}
/* ************************* */


/* Div pour "tester son savoir" dans detail-point-interet */

#didyouknow li {
	list-style-type: none;
}
/* ************************ */

/* Header pour le popup de référence dans detail-point-interet */

/*.ui-dialog {
  opacity: 1;
  background-color: white;
}*/

.reference-author {
	font-weight: 900;
}
.reference-title {
	font-style: italic;
}
#references {
	page-break-inside: avoid;
}
/* ************************ */


/* Time line */ 
/*#filter{margin:-70px 0 30px 41.1%}*/
.timeline {
	list-style-type: none;
	/*display: flex;
  align-items: center;
  justify-content: center;*/
	margin: 0 0 0 0;
	padding: 0;
}
.li {
	transition: all 200ms ease-in;
	display: inline-block;
}
.date {
	font-size: .9em;
	font-weight: normal;
	color: #777777;/*white-space: nowrap; */
}
.timestamp {
	/*margin-bottom: 20px;
  padding: 0 20%;
  display: flex;
  flex-direction: column;
  align-items: center;*/
	font-weight: 100;
	display: inline-block;
	padding: 0 .75em 0 1.5em
}
.line {
	/* padding: 0px 25%;
  display: flex;
  justify-content: center;
  border-top: 2px solid #D6DCE0;*/
	display: inline-block;
	position: relative;
	transition: all 200ms ease-in;
}
input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	z-index: 1;
	padding: 3px;
	top: -15px;
	left: 46%;
	cursor: pointer;
}
input[type="checkbox"]+span {
	font: 20px sans-serif;
	color: #000;
}
input[type="checkbox"]+span:before {
	font: 20px FontAwesome;
	content: '\00f096';
	display: inline-block;
	width: 20px;
	padding: 2px 0 0 3px;
	background: #fff;
	top: -15px;
	left: 42%;
	position: absolute;
	cursor: pointer;
	color: #D6DCE0;
}
input[type="checkbox"]:checked+span:before {
	content: '\00f046';
	color: #337ab7
}
input[type="checkbox"]:focus+span:before {
	outline: none
}
input[type="checkbox"]:disabled+span {
	color: #999;
}
/*input[type="checkbox"]:not(:disabled)+span:hover:before { color:#1B8C12 }*/


.question input[type="radio"] {
	display: none;
}
.question label {
	display: flex;
	align-items: center;
}
.question input[type="radio"] + label {
	color: #333;
	font-size: 1em;
	line-height: 1.125em
}
.question input[type="radio"] + label span:first-child {
	display: inline-block;
	width: 19px;
	height: 19px;
	margin: 0 10px 0 0;
	vertical-align: middle;
	cursor: pointer;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 2px solid #333;
}
.question input[type="radio"] + label span:first-child {
	background-color: #fff;
}
.question input[type="radio"]:checked + label span:first-child {
	background-color: #009900;
}
.question input[type="radio"]:checked.error + label span:first-child {
	background-color: #cc0000;
}
.question input[type="radio"] + label span:first-child, .question input[type="radio"]:checked + label span:first-child, .question input[type="radio"]:checked + label span:first-child {
	-webkit-transition: background-color 0.4s linear;
	-o-transition: background-color 0.4s linear;
	-moz-transition: background-color 0.4s linear;
	transition: background-color 0.4s linear;
}

label span+span {
	width:100%;
}
figcaption {
	font-size: 90%;
	padding: .75em 0;
	color: #777;
}
/* avant apres*/
 .twentytwenty-container img {
    max-width: 100%;
	width: 100%;
    }
.twentytwenty-container {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  z-index: 0;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
max-width: 100%!important}

.before-after-legend p {padding: 1em 0 ; margin: 0; font-size:.9em }

.before-after-legend p span{display: block;}
@media screen and (min-width:600px){
.before-after-legend{display: flex; }
.before-after-legend p {width:50%}
.before-after-legend p:first-child {padding: 1em 2em 1em 0; margin: 0}
.before-after-legend p:last-child {text-align: right; padding: 1em 0 1em 2em;}	
}

.slick-prev:after, .slick-next:after {
    content:'';
	display: block;
	width:30px;
	height:30px;
	background:#fff;
	border:1px solid #d0d0d0;
	border-radius: 100%;
	box-shadow: 0 0 5px #d0d0d0;
	opacity: 1;
	position: absolute;
	left:0;
	top:0;
	z-index: 1
}
.slick-prev:before, .slick-next:before {
  display: inline-block;
  font: normal normal normal 15px/30px FontAwesome;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	position: absolute;
	left: 0;
	top:1px;
	color:#337ab7; 
	z-index: 2;
	width: 30px;
	height:30px;
	text-align: center

}
.slick-prev:before{ content: "\f053"; }
.slick-next:before{ content: "\f054";}

.before-after-legend span {
	font-weight: bold;
	text-transform: uppercase;
	color:#888
}

.twentytwenty-before-label::before {
    content: "Avant"!important;
}

.twentytwenty-after-label::before {
    content: "Après"!important;
}

.recheck-choices, .retry, .show-answer {
	cursor: pointer;
}
	.favoris-carte {

		margin-top: 1em;	

}

@media screen and (max-width:600px){
	.favoris-carte {
	height:200px;
		margin-bottom: 5em;	

}
.embed-responsive-square {
	height:200px;
}	
	
}
@media screen and (min-width:601px){
.embed-responsive-square {
	padding-bottom: 33%;
}

}

.twentytwenty-container {
	margin: 0!important;
}
.chevron {
	font-size: 16px;
	padding: 0 4px;
}
.media-body, .media-left, .media-right {
	display: table-cell;
	vertical-align: top!important;
	padding-right: 0;
}

.liste li .media-left{width:100px!important}
.liste li .media-body{width:90%!important}
.favoris-item {

	padding: 0.7em 0;
	margin-bottom: 10px;

}
.favoris-item {
	border-bottom:1px solid #d0d0d0
}
.wrapper-titre{display: flex}
.favoris-entete {
	display: flex;
	padding: 0 15px;
	justify-content: space-between
}
.favoris-item-number {
	margin: auto 0;
	margin-right: 10px;
}
.favoris-item-number span {
	width: 40px;
	height: 53px;
	background:transparent url("../images/contenu/cartes/marker.svg") no-repeat center top;
	color: white;
	font-weight: bold;
	text-align: center;
	line-height: 40px;
	display: inline-block;
}
.titre, .titre a {
	margin: auto 0;
	margin-right: 10px;
	font-size: 1.2em;
	color: #fb8b1d;
	text-decoration: none;
}
.favoris-item-accroche {
	padding: 10px 0px;
}
.favoris-item .information .container-information{border:none; padding: 0}


.enlever-liste {
	margin: auto 0;
	color: rgba(0,0,0,.5);
	font-size: .8em;
	border:1px solid #fb8b1d;
	background:#fb8b1d;
	padding: 0;
	white-space: nowrap;
	font-weight: bold;
	transition:all .3s ease;
}

@media screen and (min-width:768px){
.enlever-liste {
	padding: .5em 1em;
}	
	
}

.enlever-liste:hover, .enlever-liste:hover * {
	color: rgba(255,255,255,1);
	text-decoration: none;
	

	
	
}
.enlever-liste>.fa {
	border:none;
	font-size: 1.3em;
	display: inline-block;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	
	

}
#filter .filter-date {
	border-bottom: 1px solid #fb8b1d;
	padding: 0 15px 10px 15px
}

@media screen and (min-width:900px) {
#filter .filter-date {
	border-bottom: none;
}
}
#filter {
	transition: margin-left .3s ease
}
#filter #timeline .timestamp span {
	display: none
}
#filter #timeline li:first-child {
	font-weight: 700;
	font-size: .9em
}
#filter .filter-distance p span {
	display: none
}

@media screen and (min-width:900px) {
#filter {
	width: 100%;
	padding-left: 40%;
	margin-top: -35px;
	position: relative;
}
#filter #timeline li:first-child {
	display: none
}
#filter #timeline .timestamp span {
	display: inline;
}
#filter .filter-distance p strong {
	display: none
}
#filter .filter-distance p span {
	display: inline
}
}
#filter .filter-distance {
	padding: 10px 15px 10px;
	font-size: .9em
}
.visible-print-block {
	page-break-inside: avoid;
}

@media screen and (max-width: 480px) {
.visible-print-block {
	display: block!important;
}
}
.filter-distance a {
	display: inline-block;
	padding: 2px 6px;
}
.filter-distance a.activated {
	pointer-events: none;
	cursor: default;
	color: black;
	font-weight: bold;
}


/* ----------------------notes---------------------------*/
.ui-dialog .ui-dialog-titlebar-close{background: #337ab7; border:none; z-index: 1}
.ui-widget.ui-widget-content {
    border: none;
	background:#d0d0d0;
	width: 80%!important;
	font-size: .9em
}
.ui-button .ui-icon {
	background-image:none!important;  
width: 20px;
height: 20px;
	position: absolute;
	left:8px;
	top:8px;
}
.ui-button .ui-icon:before {
	background-image:none!important;  
	display: inline-block;
  font: normal normal normal 25px/20px FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	content: "\f00d";
	color:#fff;
	width: 20px;
	height: 20px;
	position: absolute;
	left:0;
	top:0;
	z-index: 3;
	text-indent: 0
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br{border:none; border-radius:0}
.ui-widget-header{background:transparent none;}
@media screen and (min-width:768px){
	.ui-widget.ui-widget-content {
	width: 50%!important;
}
}
.reference-target{
color: #337ab7;
font-weight: bold;
}

.legende {
    font-size: 90%;
    padding: .75em 0;
    color: #777;
	line-height: 1.3em

}

.no-favorites p:first-child{
margin: 1em 0;
background: #fb9b20;
font-weight: bold;
line-height: 1.125em;
padding: 1em;
}

.no-favorites img{
	width:100%;
	height: auto;
	border:1px solid #d0d0d0;
	margin-bottom: 2em;
	
}