#center-error > p {
	padding-left: 80px;	
	line-height: unset;
}

.sizeFixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/************************
 * A propos PAGE
************************/

.app-title{
font-size:38px;
/*padding-left:15px;
padding-right:15px;*/
	color: rgb(192, 192, 192);
	font-family: blender-bold, sans-serif;
	font-weight: normal;
	display:inline-block;
	vertical-align:middle;
}
#app-title-block{
height:50px;
margin-top:15px;
margin-left: 4%;
}
#app-title-block > img{
display: inline-block;
vertical-align: middle;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 0;
}

.p-m-h-content{
position:relative;
}

#p-m-h-hide{
position:absolute;
width:100%;
height:100%;
background-color:#181d21;;
z-index:989;
}

/************************
 * Formatting page: saison
 * **********************/
#singlesaison{
display: none;
}

/* ------------------------------------------------------------------ */
/* a. Sonore (audio)
/* ------------------------------------------------------------------ */

.audio-info,
.titre-info {
bottom: 120px;
right: 0;
background: #13171B;
position: fixed;
z-index: 990;
display: none;
width: 320px;
padding: 10px;
}


#soundwave:hover .audio-info,
#legende:hover .titre-info
{
  display: block;
}
#legende{
  display: none;
  bottom: 80px;
  right: 65px;
  position: fixed;
  z-index: 990;
}

#soundwave{
  display: none;
  bottom: 80px;
  right: 15px;
  position: fixed;
z-index: 990;
}
#soundwave > img{
	width:40px;
	height:40px;
}
/* screenwidth less than or equal 480px - mobile wide
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {   

#soundwave > img{
	width:30px;
	height:30px;
}
#legende > #titre > img{
	width:30px;
	height:30px;
}
}

#soundwave h1 {
    font: 16px/24px 'blender-bold', sans-serif;
    color: #6AECF0;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
}
#soundwave h2,
#legend h2{
    font: 12px/16px 'blender-bold', sans-serif;
    color: #6AECF0;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

#soundwave h3 {
    font: 12px/16px 'blender-bold', sans-serif;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
#soundwave p, #legende{
    font: 12px/16px 'opensans-semibold', sans-serif;
    font-style: normal;
    color: #fff;
    padding: 0;
}

.les-saisons{
background: #fff;
min-height: 100vh;
overflow-x: hidden;
}

button.passer{
position: fixed;
right: 15px;
bottom: 110px;
z-index:989;
cursor: pointer;
display:none;
color:#000;
}

.legend {
	position: fixed;
	right: 15px;
	bottom: 108px;
	z-index:989;
	cursor: pointer;
	display:none;
	color:#000;
}

/* Tooltip container */

.tooltip-icon{
position:relative;
display: inline-block;
}
/* Tooltip text */
.tooltip-icon .tooltiptext {
	display:none;
	width: 180px;
	background-color: rgb(88, 104, 122);
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
  
	font-size: 10px;
	font-family:'blender-medium';
	text-transform: uppercase;
	letter-spacing: 2px;
   
  position: absolute;
  z-index: 999;
  bottom: 100%;
  left: 50%;
  line-height:1.2;
}
.tooltip-icon .tooltiptext.savoir{
	width: 120px;
	margin-left: -60px; 
}
.tooltip-icon .tooltiptext.programme{
	width: 180px;
	margin-left: -90px; 
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip-icon:hover .tooltiptext {
  display: block;
}

#content.accueil, #intro-video-saison{
height: calc(100vh - 54px);
width: 100%;
background: #000;
}


#intro-video, #saison-video{
height:100%;
width: 100%;
}

#intro-video .vjs-big-play-button,
#intro-video-saison .vjs-big-play-button,
#modal-video .vjs-big-play-button{
width: 103px;
height: 79px;
-o-object-fit: contain;
object-fit: contain;
background-color: hsla(0,0%,100%,.5);
border: none;
line-height: 79px;
top: 50%;
left: 50%;
border-radius: 30px;
margin: -51.5px auto 0 -39.5px;
font-size: 40px;
}

.intro video#bgvid, .saison #intro-video-saison video#saisonVideo { 
    position: fixed;
    bottom: 54px;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -ms-transform: translateX(-50%) translateY(0%);
    -moz-transform: translateX(-50%) translateY(0%);
    -webkit-transform: translateX(-50%) translateY(0%);
    transform: translateX(-50%) translateY(0%);
    z-index:999;
}
/*
.intro video#bgvid{
    background: url('/img/placeholder-INTRO-generale.jpeg') no-repeat;
    background-size: cover; 
}

.saison #intro-video-saison.saison01{ 
    background: url('/img/placeholder-INTRO-automne.jpeg') no-repeat;
    background-size: cover; 
}
.saison #intro-video-saison.saison02{ 
    background: url('/img/placeholder-INTRO-hiver.jpeg') no-repeat;
    background-size: cover; 
}
.saison #intro-video-saison.saison03{ 
    background: url('/img/placeholder-INTRO-printemps.jpeg') no-repeat;
    background-size: cover; 
}
.saison #intro-video-saison.saison04{ 
    background: url('/img/placeholder-INTRO-ete.jpeg') no-repeat;
    background-size: cover; 
}
*/
.saison #intro-video-saison{
    min-width: 100%;
    min-height: 100%;
}
.les-saisons > #loading{
width: 100vw;
height: 100vh;
background-color: #fff;
position:absolute;
top:0px;
left:0px;
z-index: 989;
}

#video-modal-body > #modal-video{
max-width:100%;
min-height: 75vh;
height: 100%;
margin-left: auto;
margin-right: auto;
}

#windmill{
position:absolute;
bottom:0;
width: 100%;
}

/*#rosedesvents{
position:absolute;
bottom:0;
width: 100vw;
left:0px;
}
*/
/*
 * MH 08
.at-container, .at-item-noblur {
  width:700px;
  height:700px;
}
*/ 

#rosedesvents{
  width:900px;
  height:900px;
}
  
.les-saisons #saison-details{
/* MH 08 */
position: fixed;
bottom:410px;
left:0;
/* MH 08 
width: 420px;
min-width: 420px;
* */
width: 475px;
min-width: 475px;
color: #333;
/*display:flex;
flex-shrink: 0;
flex-grow:0;*/
}

.les-saisons #saison-top #logo-soustitre{
	font-size: 26px; /*28px;*/
	letter-spacing:2px;
	text-transform: none;
	margin-top: 20px;
	font-family: blender-bold, sans-serif;
}

.les-saisons #saison-top  #logo-soustitre .line .numero{
	padding-right: 6px;
	color:#e30613;
}

.les-saisons #saison-top #morceaux,
#singlesaison #saison-intro #saison-titre > #morceaux,
#tuile-titre #morceaux {
	color:#e30613;
	text-transform:uppercase;
	margin-top: 20px;
	font-size: 25px;
	letter-spacing:2px;
	font-family: blender-bold, sans-serif;
}

/*
.les-saisons #saison-top #morceaux,
#singlesaison #saison-intro #saison-titre > #morceaux,
#tuile-titre #morceaux {
	color:#e30613;
	text-transform:uppercase;
	margin-top: 20px;
	font-size: 25px;
	letter-spacing:2px;
	font-family: sans-serif;
}
	
	
.les-saisons #saison-top #morceaux.fonts-loaded,
#singlesaison #saison-intro #saison-titre.fonts-loaded > #morceaux.fonts-loaded,
#tuile-titre #morceaux.fonts-loaded {
	font-family: blender-bold;
}
*/


#singlesaison #saison-intro #saison-titre > #morceaux {
    margin-top: -30px;
    width: 150px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 1;
}

#tuile-titre #morceaux {
width: 100%;
	margin-top: 10px;
	/*text-align: left;*/
	margin-bottom: 0px;
	font-size: 40px;
}
#tuile-header{
width:100%;
}
.les-saisons #saison-details #saison-top{
margin-left:36px;
margin-top:36px;
}


img[usemap], map area{
outline-style: none; /* potential fix for IE 11 */
outline: none;/* other browsers just in case */
}

#eolienne-alt2{
width: 175px;
}

#eolienne-alt2 > img{
max-width:100%;
}

.intro{
background: #fff;
height:100vh;
}

#choisissez{
	margin-top:60px;
   }
   
#choisissez .texte{
	display:inline-block;
	font-size: 18px;
	font-family: blender-bold, sans-serif;
	text-transform: uppercase;
    letter-spacing: 2px;
    line-height:1;
    width:320px;
}

#choisissez img{
	display:inline-block;
	height: auto;
	width: 45px;
	padding-right:8px;
	margin-bottom:-2px;
}



/* ------------------------------------------------------------------ */
/* b. Page Menu Horizontal (Tuiles)
/* ------------------------------------------------------------------ */

#page-maintitle {
margin-left:0;
text-align: left;
text-transform: uppercase;
letter-spacing: 2px;
color:#efefef;
font-size: 4.5rem;
font-weight: 300;
line-height: 1.2;
padding-right: .5rem;
padding-left: .5rem;
white-space: nowrap;
}
#page-arrowtitle {
min-width:45px;
margin-top:4px;
}

#page-subtitle p{
font-size:2rem;
text-align: left;
line-height: 1.4;
color:#efefef;
font-weight:600;
font-family: 'blender-medium';
margin-bottom:0px;
padding-right:4%;
}

#page-m-h, #territoire-tuiles{
	width: 100%;
	background-color: #181d21;
    text-align: center;
}
/*
#territoire-tuiles:after {
  content: "";
  display: table;
  clear: both;
}
*/

#page-m-h.js-shuffle{
	display: none;
}

#page-m-h.show{
display:block;
}

#territoire-tuile #saison-titre{
width: 255px;
}

#page-m-h .row, #territoire-tuiles .row{
	background-color: #181d21;
}

.tuile-block {
   height:600px;
   width:300px;
   overflow:hidden;
}
.tuile-block > img.primary{
	object-fit: cover;
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    width:auto !important;
    height:100%;
    max-width:none;
    min-width:300px;
}


.tuile-block .tuile-text {
    position: absolute;
    height:100%;
    left: 0;
    right:0;
    top: 0;
    color: rgb(192, 192, 192);
    font-weight:600;
    padding-left:30px;
    padding-right:30px;
}

.rgba-black-strong{
    background: rgba(0, 0, 0, 0.9);
}
.rgba-red{
    background: rgba(227, 0, 11, 0.9);
}

.mask {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
  
  z-index: -1;
}

.view:hover > .mask {
    opacity: 1.0;
	z-index: 900;
}

.tuile-block .tuile-icons{
  position: absolute;
  bottom:0;
  left: 0;
  width:100%;
}

.tuile-block .tuile-icons .tuile-plus{
color:#fff;
font-size: 50px;
}

.tuile-block .tuile-icons img{
  max-width:50px;
  margin-left:12px;
  margin-right:12px;
}
.tuile-block .tuile-icons .icons{
  position: relative;
  text-align: center;
  display:inline-block;
  height:50px;
}

.tuile-block:hover > .tuile-text{
   /* opacity: 1.0;*/
    display:inline-block;
}

/* quick grid */
.container{
  width: 95%;
  margin: auto;
}
 
 #page-m-h.js-shuffle
 {
 width:calc(95vw);
 position: relative;
 overflow: hidden;
 }

#page-m-h .tuile-text #categorie{	
   font: 20px blender-bold, sans-serif;
   margin-bottom: 0px;
   text-align: center;
   text-transform: uppercase;
   color: #000;
   padding-top:25px;
}
#page-m-h .tuile-text .plan-title{	
  	font-size: 24px;
  	padding-top: 60px;
  	padding-bottom: 0px;
   margin-bottom: 0px;
  	text-align: center;
  	letter-spacing:0px;
   text-transform: uppercase;
   line-height:1;
   color: #fff;
   font-family: blender-heavy, sans-serif;
}
#page-m-h .tuile-text .plan-soustitle{
color:#000;
   margin-bottom:0px;
   line-height:1;
}

#page-m-h .tuile-text .plan-date{
padding-top:40px;
  	padding-bottom:0px;
  	text-align: center;
   color: #fff;
   font-size: 22px;
   font-family: blender-bold, sans-serif;
  	
}

#page-m-h .tuile-text .plan-ville{
  text-transform:uppercase;
   
}
#page-m-h .tuile-text .les-lieux h6{
   line-height:1;
   font-size:20px;
   font-family: blender-bold, sans-serif;
   color:#000;
}

#page-m-h .tuile-text .extrait{
   line-height:1;
   padding-top:55px;
   font-family: 'blender-medium', sans-serif;
   font-size:20px;
   text-align:center;
   color:#fff;
   font-style:italic;
   
}
#page-m-h{
margin-bottom: 60px;
}


#page-maintitle .territoire{
margin-left:0;
text-align: left;
text-transform: uppercase;
letter-spacing: 2px;
color:#efefef;
font-weight:900;
font-size:25px;
}

.show-pointer:hover {
    cursor: pointer;
}

.savoir-plus{
color:#fff;
text-transform: uppercase;
text-align:center;
font-size: 20px;
font-family: 'blender-medium', sans-serif;
}

.slide-territoire img{
max-width: 150px;
}

/* ------------------------------------------------------------------ */
/* c. Shuffle grid (Tuiles)
/* ------------------------------------------------------------------ */
/* Small reset */
*,
::before,
::after {
  box-sizing: border-box;
}

body {
  color: #34495e;
  /*padding-bottom: 100px;*/
}

.shuffle-group  button{
	display:none;
}

/*
  Shuffle needs either relative or absolute positioning on the container
  It will set it for you, but it'll cause another style recalculation and layout.
  AKA worse performance - so just set it here
 */
.my-shuffle-container {
  position: relative;
  overflow: hidden;
}

.my-sizer-element {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  height:600px;
  width:300px;
  margin-left:10px;
  margin-bottom:10px;
}

.picture-item {
  height: 220px;
  margin-top: 24px;
}
.picture-item img {
  display: block;
  width: 100%;
}

@supports ((-o-object-fit: cover) or (object-fit: cover)) {
  .picture-item img {
    max-width: none;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.picture-item--h2 {
  height: 464px;
  /* 2x the height + 1 gutter */
}

.picture-item__inner {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #ecf0f1;
}

.picture-item__details {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
          justify-content: space-between;
  width: 100%;
  padding: 1em;
}

.picture-item__description {
  width: 100%;
  padding: 0 2em 1em 1em;
  margin: 0;
}

.picture-item__title {
  flex-shrink: 0;
  margin-right: 4px;
}

.picture-item__tags {
  flex-shrink: 1;
  text-align: right;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .picture-item--overlay .picture-item__details {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    -webkit-backdrop-filter: blur(7px);
            backdrop-filter: blur(7px);
    color: white;
    overflow: hidden;
  }
  .picture-item--overlay .picture-item__description {
    display: none;
  }
  .picture-item--overlay a {
    color: white;
    text-shadow: 0 0 1px black;
  }
}


@media screen and (max-width: 767px) {
  .picture-item {
    height: auto;
    margin-top: 20px;
  }

  .picture-item__details,
  .picture-item__description {
    font-size: 0.875em;
    padding: 0.625em;
  }

  .picture-item__description {
    padding-right: 0.875em;
    padding-bottom: 1.25em;
  }

  .picture-item--h2 {
    height: auto;
  }
}

.filters-group {
  padding: 2.5rem;
  margin: 0 0 4px;
  border: 0;
}

@media screen and (min-width: 768px) {
  .filters-group-wrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
  }
}

.btn-group:after,
.btn-group:before {
  content: " ";
  display: table;
}

.btn-group:after {
  clear: both;
}

.btn-group .btn {
  float: left;
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-radius: 3px 0 0 3px;
}

.btn-group .btn:not(:first-child) {
  margin-left: -1px;
}

.btn-group .btn:last-child {
  border-radius: 0 3px 3px 0;
}

.btn-group label.btn input[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.btn {
  display: inline-block;
  padding: 0.75em 0.8em;
  text-align: center;
  border-radius: 3px;
  border: 1px solid rgb(192, 192, 192);
  color: rgb(192, 192, 192);
  font-size: 1rem;
  background-color: rgba(52, 73, 94, 0);
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  cursor: pointer;
  -webkit-appearance: none;
}
.filters-group .sort-options .btn{
white-space: normal;
width: 60px;
height: 30px;
}
.filters-group .btn{
	white-space: normal;
	max-width: 120px;
	max-height:80px;
	min-width:82px;
}
.header-row .filters-group{
    padding: 0;
    }
       
    
@media (-moz-touch-enabled: 0), (pointer: fine) {
  .btn:hover {
    color: #fff;
    text-decoration: none;
    background-color: #34495e;
  }
}
.btn:focus {
  outline-width: 0;
  box-shadow: 0 0 0 2px rgba(52, 73, 94, 0.4);
}

.btn.active,
.btn:active {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  color: #fff;
  background-color: rgba(88, 104, 122, 0.4);
}

.btn:focus.active {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(52, 73, 94, 0.4);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  color: #34495e;
  background-color: rgba(52, 73, 94, 0);
}

.btn--primary {
  color: rgb(192,192,192);
  border-color:  rgb(192,192,192);
  background-color: rgba(194, 14, 26, 0);
}

@media (-moz-touch-enabled: 0), (pointer: fine) {
  .btn--primary:hover {
    background-color: #58687A;
  }
  .passer:hover {
    background-color: #e30613;
  }
  
  
}
.btn--primary:focus {
 /*box-shadow: 0 0 0 3px rgba(194, 14, 26, 0.4);*/
}

.btn--primary.active,
.btn--primary:active {
/*  background-color: #c10d19;*/
  box-shadow: 0 0 0 2px rgba(194, 14, 26, 0.6);
}

.btn--primary:focus.active {
 /* box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(52, 152, 219, 0.4);*/
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(194, 14, 26, 0.6);
}

.btn--primary:disabled {
  color: #58687A;
  background-color: rgba(88, 104, 122, 0);
}

@media screen and (max-width: 767px) {
  .btn {
    font-size: 0.875rem;
  }
}
.textfield {
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 100%;
  border: 2px solid #95a5a6;
  border-radius: 4px;
  padding: 0.5em;
  font-size: 1rem;
  color: #34495e;
  -webkit-transition: 0.15s;
  transition: 0.15s;
}

.textfield::-webkit-input-placeholder {
  color: #95a5a6;
  -webkit-transition: 0.15s;
  transition: 0.15s;
}

.textfield:-ms-input-placeholder {
  color: #95a5a6;
  -ms-transition: 0.15s;
  transition: 0.15s;
}

.textfield::-ms-input-placeholder {
  color: #95a5a6;
  -ms-transition: 0.15s;
  transition: 0.15s;
}

.textfield::-moz-placeholder {
  color: #95a5a6;
  -moz-transition: 0.15s;
  transition: 0.15s;
}

.textfield::placeholder {
  color: #95a5a6;
  -webkit-transition: 0.15s;
  transition: 0.15s;
}

.textfield:hover {
  outline-width: 0;
  color: #5d6d77;
  border-color: #5d6d77;
}

.textfield:hover::-webkit-input-placeholder {
  color: #5d6d77;
}

.textfield:hover:-ms-input-placeholder {
  color: #5d6d77;
}

.textfield:hover::-ms-input-placeholder {
  color: #5d6d77;
}

.textfield:hover::-moz-placeholder {
  color: #5d6d77;
}

.textfield:hover::placeholder {
  color: #5d6d77;
}

.textfield:focus {
  outline-width: 0;
  border-color: #34495e;
}

.textfield:focus::-webkit-input-placeholder {
  color: #34495e;
}

.textfield:focus:-ms-input-placeholder {
  color: #34495e;
}

.textfield:focus::-ms-input-placeholder {
  color: #34495e;
}

.textfield:focus::-moz-placeholder {
  color: #34495e;
}

.textfield:focus::placeholder {
  color: #34495e;
}



/* Ensure images take up the same space when they load */
/* https://vestride.github.io/Shuffle/images */
.aspect {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}

.aspect__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.aspect--16x9 {
  padding-bottom: 56.25%;
}
 /******************************************
  * 
  * Modal height remains within viewport
  * 
  * ****************************************/
.modal {
    text-align:center;
}
.modal .img-diaporama {
   height: calc(100vh - 165px);
   /*width:100%;*/
   object-fit: contain;
    
    @media (min-width: 576px) {
      height: 350px;
    }
}

#carousel-modal-body #carouselDiaporama #carousel-diaporama-inner .carousel-item img{
max-height:720px;
}
#carousel-modal-body{
padding:0px;
}

#carousel-modal-body #carousel-diaporama-ind{
margin-bottom:0px;
margin-top:0px;
}

.modal-content{
background-color: #000;
width:100%;
margin-left: auto;
margin-right: auto;
}

.modal-content .singleview ul{
list-style: disc outside;
margin-bottom: 44px;
}

.modal-content .singleview ul li {
    line-height: 20px;
    margin-bottom: 24px;
    margin-left: 24px;
    padding-left: 4px;
}

.modal-content p{
    color: #D4D4D4;
}

.modal-content p a{
    color: #fff;
 }
  .modal-content .singleview p a{
  	background: transparent url(/user/themes/paysage/images/icones/lien-sm.png) center left no-repeat;
   padding-left: 35px;
 }
.modal-content p a:visited {
    color: #D4D4D4;
 }

.modal-dialog {
  max-width: calc(100vw);
  margin:1.75rem auto;
 }
 
@media (min-width:576px) {
 .modal-content {
width: calc(90vw - 100px);
	}
.modal-dialog {
  max-width: calc(70vw);
 }
}

#modal-body-single .singleview .description{
margin: 30px auto; 
}

@media (min-width:768px) {
#modal-body-single .singleview .description{
padding: 0px 20px; 	
max-width: 400px; 
}
}

@media (min-width:992px) {
#modal-body-single .singleview .description{
padding: 0px 30px; 	
max-width: 650px; 
}
}

@media (min-width:1200px) {
#modal-body-single .singleview .description{
max-width: 800px;
padding: 0px 40px; 
}
}



.modal-header{
min-height:42px;
}

.btn-fermer{
position: absolute;
top: 10px;
right:10px;
width: 80px;
}

#selectList h3{
color:#fff;
}

.select-modal-item img, .select-modal-item h3{
display:inline-block;
}

#selectList .select-modal-item > img{
margin-bottom: -2px;
margin-right: 10px;
width: 20px;
height: 20px;
}


.modal h2{
font-size: 24px;
padding-top: 40px;
padding-bottom: 0px;
margin-bottom: 6px;
margin-left: auto;
margin-right: auto;
letter-spacing: 0px;
text-transform: uppercase;
line-height: 1;
color: #fff;
font-family: blender-heavy, sans-serif;
}

#carousel-modal-body, #modal-body-single, #modal-body-territoire, #modal-body-select{
margin: auto;
}
#pdf-modal-body{
height:85vh;
}

.modal-backdrop{
    opacity:0.8 !important;
}

.modal-header{
   border-bottom: none;
   z-index:999;
 /*
  *  display:flex;
  flex-direction:row;
  justify-content: flex-end;
  * */
  padding-bottom: 0;
}
.modal-footer {
    border-top: none;
  display:flex;
  flex-direction:row;
  padding-top: 0;
}

#pdfview.modal-footer{
  justify-content: flex-end;
}

.modal-footer > span{
  flex-grow:1; 
}

.modal-footer > .video-control{
	flex-grow:0;
	width:15%;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	opacity: .5;
}


#carouselDiaporama {
/* width: calc(70vw); //explicit width was causing the div to expand beyond the parent */
 margin: 0 auto;
 }
.carousel-inner{
height:100%;
}
.carousel-control-prev, .carousel-control-next{
max-height: calc(20vh);
margin-top: auto;
margin-bottom: auto;
}


/* Use Bootstrap breakpoints for consistency.

@media (min-width:576px) {
 .modal-dialog {
  max-width:500px;
  margin:1.75rem auto
 }
}
@media (min-width:768px) {
 .modal-dialog {
  max-width:650px;
  margin:1.75rem auto
 }
}
@media (min-width:992px) {
 .modal-dialog {
  max-width:900px;
  margin:1.75rem auto
 }
}
@media (min-width:1200px) {
 .modal-dialog {
  max-width: calc(90vw - 100px);
  margin:1.75rem auto
 }
}
*/

#carousel-credit{
	padding-top: 0;
/*	position: fixed;
	bottom:10px;
	right:15px;*/
}

/***************
 * Tuile single modal
 * *************/
.modal .img-singleview {
  /* height: calc(80vh);*/
   width:calc(30vw);
   object-fit: cover;
    
    @media (min-width: 576px) {
      height: 350px;
    }
}

.modal .description{
color: #fff;
text-align: left;
}
.modal .description p{
color: #d4d4d4;
}

.modal .les-lieux{
line-height:1.5;
}
.modal .singleview h2.title{
font-size: 32px;
}

.modal .singleview .dates {
    padding-top: 40px;
    padding-bottom: 0px;
    color: #fff;
    font-size: 20px;
    font-family: blender-bold, sans-serif;
}

.modal .singleview .les-lieux {
    color: rgb(192, 192, 192);
    font-size: 18px;
    font-family: blender-bold, sans-serif;
}

.modal .artist-list{
line-height:1.5;
}


.modal .artist-list > .artist-name {
	color: rgb(192, 192, 192);
	font-weight: normal;
	font-size: 18px;
}

.artist-name > a {
	color: rgb(192, 192, 192);
font-weight: normal;
text-decoration:underline;
font-size: 18px;
}

.artist-list .addline{
	padding: 0px 2px;
}

.artist-name > a:hover, 
.artist-name > a:focus,
.artist-name > a:visited {
	color: rgb(200, 200, 200);
}

.modal .mention{
line-height: 1.5;
}

.modal-body .singleview{
background-color: #181d21;
    overflow: auto;
    padding:25px;
}

/************************
 * Formatting page: saison
 * **********************/

#singlesaison #logo{
position: fixed;
top: 20px;
left: 0;
text-align:center;
width: 300px;
}

#singlesaison #territoire-tuiles #logo{
position: static;
text-align:center;
width: 300px;
height: 42px;
margin-top: 20px;
}

#singlesaison .logo-saison{
width: 225px;
margin-top: 15px;
}

#singlesaison .header-row{
margin-bottom: 20px;
}


#singlesaison #saison-left-column{
position: static;
z-index: 989;
bottom: 0px;
left: 0px;
}

#singlesaison #logo-titre{
width: 300px;
text-align:center;
}

#singlesaison #saison-top{
margin-top: 20px;
}

#singlesaison #saison-titre{
margin-top:0px;
}

#singlesaison #saison-bottom{
padding-bottom: 20px;
margin-bottom:25px;
color: #333;
}

#singlesaison #saison-docs{
margin-bottom: 15px;
max-width: 300px;
position:relative;
text-transform: uppercase;
left: 0px;
height: auto;
}

#singlesaison #saison-docs > a{
padding-bottom: 2px;
padding-top: 2px;
}
/*
#tuile-titre h2{
font-family: blender-medium, sans-serif;
margin-bottom:0px;
text-align: left;
}

#tuile-titre, 
.header-row{
padding-left:45px;
}
*/

.territoire-choix{
color:white;
width: 80%;
text-align: left;
}

#singlesaison h5{
color:#333;
line-height: 25px;
}

/*#singlesaison .sort-options{
display:none;
}
* */

#content .saison{
height: 100vh;
overflow:hidden;
}

.logo-pp {
margin-bottom: 80px;
max-width:180px;
}

.logo-saison{
/*max-width:180px;*/
width:160px;
}

.saison #saison-details{
position:fixed;
bottom:0;
left:0;
color: #333;
width:100%;
}

#saison-docs > #theme{
text-transform: none;
font-size: 20px;
letter-spacing: 2px;
font-family: blender-bold, sans-serif;
text-align: center;
margin-left: auto;
margin-right: auto;
line-height: 0.9;
padding: 0px 10px 5px 10px;
}

#saison-docs{
position:fixed;
top:30px;
left:36px;
max-width:300px;
height:150px;
text-align:centre;
}
#saison-docs h5{
margin-bottom: 2px;
}
.logo-saison.black h1{
margin-bottom: 0px;
color: #000;
}

.logo-saison.white h1{
margin-bottom: 0px;
color: rgb(239, 239, 239);
}

#singlesaison #saison-territoire{
margin-top: 15px;
line-height:0.9;
}
#saison-territoire{
margin-left:0;
text-align: left;
text-transform: uppercase;
letter-spacing: 2px;
color: rgb(239, 239, 239);
font-size:40px;
}
#singlesaison #nom-territoire{
display:inline-block;
  flex-grow:0;
}
/*
#tuile-plus{
font-size: 6rem;
font-weight: 300;
line-height: 1.2;
text-align:left;
color:#e30613;
font-family: blender-bold, sans-serif;
padding-left:0px;
margin-left:0px;
text-transform:uppercase;
display:inline-block;
}*/


/*body.stop-transitions * {
  transition: none !important;
}
*/


#saison-intro{
background-color: #fff;
	opacity: 1;
  transition: all .75s ease;
  width: 100%;
}

#saison-intro.hide{
background-color: #fff;
	opacity: 0;
	display:none;
}

#saison-docs{
text-align: center;
    width: 300px;
}

#saison-docs h4{
margin-bottom: 0;
color: #000;
letter-spacing: 2px;
}

#saison-intro a, a:visited{
text-decoration: none;
color:#333;
}

#saison-details a:hover{
color:#000;
font-size: 16px;
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.05); }

.saison .modal-backdrop{
    opacity:0.4 !important;
}

.territoire-select .hide{
display: none;}
/***************
 * Slide in territory tiles 
 * *************/

#territoire-tuiles{
position: absolute;
 left:0;
 top: 0;
 width: 1px;
 height:100vh;
  opacity: 0;
  z-index: -1;
  transition: all .75s ease;
}

#territoire-tuiles.show {
  opacity: 1;
  z-index: 980;
  height:100vh;
  width: 100%;
}

.box {
  display: block;
  background: #181d21;
}

.directory-listing {
margin:auto;
width:60%;
text-align:left;
background: #fff;
color: #000;
}


/*************
 * Animate rose des vents
 * ***********/

.at-container img {
 position:absolute;
  left:0;
  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -o-transition: opacity 2s ease-in-out;
  transition: opacity 2s ease-in-out;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

.at-container img.opaque{
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
}

/*.les-saisons .row{
position: absolute;
bottom: 54px;
}
*/
/*.at-container img#baton{
 position: absolute;
 left: 0;
 top: 25px;
}*/



.at-item-noblur {
  animation-name: rotate-center-noblur;
  animation-duration: 3.2s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
}

@keyframes rotate-center-noblur {
  0%{
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100%{
    -webkit-transform: rotate(1800deg);
    transform: rotate(1800deg);
  }
}
.les-saisons #saison-details {
		width:475px;
		min-width:475px;
}	
.at-container {
	/* center windmill within page */
	position: relative;
	margin:auto;
	}

	#windmill{
	/* page bottom */
		position:absolute;
		bottom:35px;
		min-width: 475px
	}
.at-container, .at-item-noblur {
	  width:475px;
	  height:475px;
	}
		
@media (min-width:1359px) {
	body{
	overflow: hidden;
	}

	.at-container, .at-item-noblur {
		width:calc(100vh);
		height:calc(100vh); /*800px;*/
	}
	
	.les-saisons #saison-details{
		bottom: calc(((100vh - 290px) / 2) + 27px);
	}
	#windmill{
	/* full page */
		width: 100%;
	}
	.at-container, .at-item-noblur {
	  max-width:800px;
	  max-height:800px;
	}
}
	
@media (max-width:1358px) {
	body{
	overflow: hidden;
	}
	
	#windmill{
	/* keep left */
		width: calc(100vh);
		left: calc(100vw/3);
	}
	.at-container, .at-item-noblur {
		width:calc(100vh);
		height:calc(100vh); /*800px;*/
	}
	
	.at-container, .at-item-noblur {
	  max-width:800px;
	  max-height:800px;
	}
	.les-saisons #saison-details{
		bottom: calc(((100vh - 290px) / 2) + 27px);
	}
}
	
@media (max-width:980px){
	body{
	overflow: scroll;
	}
	
	#windmill{
	/* full page bottom */
		width: 100%;
		left: 0px;
		position: relative;
		overflow: hidden;
	}
	.at-container, .at-item-noblur {
	  max-width:475px;
	  max-height:475px;
	}
	.les-saisons #saison-details{
		bottom:0px;
		position: relative;
	}
}


#saison-description{
	font-family: blender-bold, sans-serif;
	color:#333;
	line-height: 1.2;
	padding-right:20px;
}

#saison-description .numero{
	padding-right: 6px;
	color:#e30613;
	font-size: 2.5rem;
	width: 48px;
	text-align: right;
}

#saison-description .puce{
	padding-right: 4px;
}

.filters-group .btn .numero{
	color:#e30613;
	font-size: 2rem;
/*padding-right:6px;*/
	display:block;
}
.filters-group .btn .titre{
	display: inline-flex;
}

#saison-description .texte{
	text-transform: uppercase;
}
#saison-description .line{
	padding-bottom: 2px;
}

.saisontag{
padding-left:10px;
padding-right:10px;
}

#singlesaison #choisissez #toute{
background:#e30613;
position: fixed;
bottom: 225px;
left: 300px;
}

 
  
#singlesaison #mobile-territoire .btn--primary, #mobile-les-saisons .btn--primary{
    color: #333;
    border-color: #333;
    text-align:center;
    background-color:rgba(255,255,255,0.6)
    }
 
 
#singlesaison.SAISON01 #saison-intro {
 background-image: url('img/cartewebdoc-SAISON01.jpg');
 }
#singlesaison.SAISON02 #saison-intro {
 background-image: url('img/cartewebdoc-SAISON02.jpg');
 }
#singlesaison.SAISON03 #saison-intro {
 background-image: url('img/cartewebdoc-SAISON03.jpg');
 }
#singlesaison.SAISON04 #saison-intro {
 background-image: url('img/cartewebdoc-SAISON04.jpg');
 }
 
#singlesaison #saison-intro img.carte,
	 #singlesaison #saison-intro map{
		display:block;
	}
	
#singlesaison #saison-description{
  margin-top:20px;
  display: flex;
  }

#singlesaison #saison-left-column{
	width:300px;
}
   
#singlesaison #mobile-territoire, .les-saisons #saison-details #mobile-les-saisons{
 display:none;
}

#singlesaison #choisissez #full{
    background: #e30613;
 display: block;
 position: fixed;
 left: 300px;
 bottom: calc(100vh/4);
 font: 12px 'blender-bold', sans-serif;
}


/* Screen version  */
 @media (min-aspect-ratio: 5/3) and (max-aspect-ratio: 7/3){

body{
overflow: hidden;
}


#singlesaison #saison-details{
height: calc(100vh + 5px);
}

  #singlesaison #saison-intro {
 background-size: auto calc(100vh + 100px);
 background-position:right 0 top -50px;
 background-repeat: no-repeat;
 padding:0;
 height: 100vh;
 overflow:hidden;
}

 #singlesaison #saison-intro img.carte{
	height:calc(100vh + 100px);
	width:auto;
position: absolute;
	top:-50px;
	right:150px;
 overflow:hidden;
}

#singlesaison #saison-intro img.carte,
	 #singlesaison #saison-intro map{
		display:block;
	}
}

/* iPad version */
 @media (min-aspect-ratio: 24/19) and (max-aspect-ratio: 5/3){
 
body{
overflow: hidden;
}
#singlesaison #saison-details{
height: calc(100vh + 5px);
}

  #singlesaison #saison-intro {
 background-size: cover;
 background-position:right -110px top 0px;
 background-repeat: no-repeat;
 padding:0;
 height: 100vh;
 overflow:hidden;
} 


#singlesaison #saison-intro img.carte{
	height: 100vh;
	width:auto;
	position: absolute;
	top:0px;
	right:30px;
 overflow:hidden;
/*	margin-top:0px;
	margin-right: -110px;*/
}
#singlesaison #mobile-territoire, .les-saisons #saison-details #mobile-les-saisons{
 display:none;
}

 }

/* Don't download background image for mobile screens */

@media (max-aspect-ratio: 24/19){
/* Show mobile version for all other aspect ratios */

body{
overflow: scroll;
}
#singlesaison #saison-intro {
	min-height: 100vh;
} 
#singlesaison.SAISON01 #saison-intro {
 background-image: none;
 }
#singlesaison.SAISON02 #saison-intro {
 background-image: none;
 }
#singlesaison.SAISON03 #saison-intro {
 background-image: none; 
 }
#singlesaison.SAISON04 #saison-intro {
 background-image: none;
 }


#singlesaison #saison-intro img.carte,
#singlesaison #saison-intro map{
 display:none;
 }

/*#singlesaison #mobile-territoire, .les-saisons #saison-details #mobile-les-saisons{*/

#singlesaison #mobile-territoire{
 display:block !important;
}

#saison-details #mobile-territoire #saison-description {
  display: flex!important;
  margin-left:85px;
  margin-bottom:20px;
  }

#saison-details #saison-description {
  display: none !important;
 }
 
#singlesaison #saison-details{
width:100%;
position: static;
bottom: 0px;
left: 0px;
min-height: calc(100vh);
}
/*#singlesaison #mobile-territoire, #singlesaison #mobile-les-saisons{*/

#singlesaison #mobile-territoire{
display:block;
}
#singlesaison #saison-left-column {
    width: 100vw;
    }
 #singlesaison #choisissez #toute {
    background: #e30613;
    position: static;
    display:block;
    margin: auto;
margin-bottom: 15px;
  }
  #singlesaison #choisissez #full{
    display: none;
    }

}

@media (max-width:576px){
/* Show mobile version for all other aspect ratios */

body{
overflow: scroll;
}
#singlesaison #saison-intro {
	min-height: 100vh;
} 
#singlesaison.SAISON01 #saison-intro {
 background-image: none;
 }
#singlesaison.SAISON02 #saison-intro {
 background-image: none;
 }
#singlesaison.SAISON03 #saison-intro {
 background-image: none; 
 }
#singlesaison.SAISON04 #saison-intro {
 background-image: none;
 }


#singlesaison #saison-intro img.carte,
#singlesaison #saison-intro map{
 display:none;
 }

/*#singlesaison #mobile-territoire, .les-saisons #saison-details #mobile-les-saisons{*/

#singlesaison #mobile-territoire{
 display:block !important;
}

#saison-details #mobile-territoire #saison-description {
  display: flex!important;
  margin-left:85px;
  margin-bottom:20px;
  }

#saison-details #saison-description {
  display: none !important;
 }
 
#singlesaison #saison-details{
width:100%;
position: static;
bottom: 0px;
left: 0px;
min-height: calc(100vh);
}
/*#singlesaison #mobile-territoire, #singlesaison #mobile-les-saisons{*/

#singlesaison #mobile-territoire{
display:block;
}
#singlesaison #saison-left-column {
    width: 100vw;
    }
 #singlesaison #choisissez #toute {
    background: #e30613;
    position: static;
    display:block;
    margin: auto;
margin-bottom: 15px;
  }
  #singlesaison #choisissez #full{
    display: none;
    }

}





@media (min-aspect-ratio: 7/3) {

body{
overflow: scroll;
}
/* Show mobile version for all other aspect ratios */
#singlesaison #saison-intro {
	min-height: 100vh;
} 

#singlesaison.SAISON01 #saison-intro {
 background-image: none;
 }
#singlesaison.SAISON02 #saison-intro {
 background-image: none;
 }
#singlesaison.SAISON03 #saison-intro {
 background-image: none; 
 }
#singlesaison.SAISON04 #saison-intro {
 background-image: none;
 }
 
#singlesaison #saison-intro img.carte,
#singlesaison #saison-intro map{
 display:none;
 }

#mobile-territoire{
 	display:block;
 	padding-left: 300px;
}

#mobile-territoire #saison-description {
 	display: none !important;
 }

#saison-details #saison-description {
  display: flex;
 }
 
#singlesaison #saison-details{
width:100%;
position: static;
bottom: 0px;
left: 0px;
min-height: calc(100vh);
}

/*#singlesaison #mobile-territoire, #singlesaison #mobile-les-saisons{*/

#singlesaison #mobile-territoire{
	display:block;
}

#singlesaison #saison-left-column {
    width: 100vw;
    }
    
  #singlesaison #choisissez #toute {
    background: #e30613;
    position: static;
    display:block;
    margin: auto;
margin-bottom: 15px;
  }
  #singlesaison #choisissez #full{
    display: none;
    }

}


#page-m-h-header{
display: none;
}

#page-m-h-header.show{
display: block;
padding-bottom: 10px;
}

.retour{
padding-right:5px;
width: 200px;
text-align:right;
}
#retour-carte{
margin-top:20px;
}
/*  Button version - move to last position of filters next to others
#programme-button{
	font-size: 14px;
	width:145px;
	font-family:'blender-medium';
    text-transform: uppercase;
    letter-spacing: 2px;
    display:none;
}

#prog-img{
width: 100%;
height: 25px;
padding-top: 8px;
margin-bottom: 8px;
}
*/


#singlesaison .retour h6{
text-transform: uppercase;
color:rgb(239, 239, 239);
}

/* Use Bootstrap breakpoints for consistency.

@media (min-width:576px) {
 .modal-dialog {
  max-width:500px;
  margin:1.75rem auto
 }
}
@media (max-width:768px) {
 .mobile-territoire {
 display:block;
 }
 #saison-intro img.carte,
 #saison-intro map{
 display:none;
 }
}
@media (min-width:992px) {
 .modal-dialog {
  max-width:900px;
  margin:1.75rem auto
 }
}
@media (min-width:1200px) {
 .modal-dialog {
  max-width: calc(90vw - 100px);
  margin:1.75rem auto
 }
}
*/

/*
@media (max-width:767px) {
#mobile-les-saisons{
 display:block;
 }
 #rdv-saison{
 display:none;
 }
}

@media (min-width:768px) {
 #mobile-les-saisons{
 display:none;
 }
 #rdv-saison{
 display:block;
 }
}
*/



#nav-wrap > a:before {
      content: url(./img/white-bars.svg);
    /* background: center url(./img/white-bars.svg) no-repeat;*/
      line-height: 54px;
      padding: 15px 8px;
      text-align: left;      
      display: block; 
      float: right;
      width:40px;
      height:40px; 
	}