.link{
      margin-bottom: 1em;
    font-size: 1.3em;
}

#modale div.scroll{
  height:100%;
}
.modaledane:hover{
cursor: pointer;
}
a.modaledane{
  display:block;
 background-image: url(../img/pdf-file.svg);
    padding-left: 25px;
    background-position: left;
    background-repeat: no-repeat;
    font-size: 100%;
    margin-bottom: 10px;
    padding-top: 0px!important;
    margin-top: -5px!important;
}

.btnUp{
color:#fff!important;
width:100px;
height:100px;
}



.tag{
  font-size:90%;
  color:#888;
}

.now .tag .ivide {
display:none;
}

.vide .tag .inow{
display:none;
}

.tag{
  font-size:90%;
  color:#888;
}

.now .tag{
  color : #fff;
}

body {
  scroll-behavior: smooth;
}
.programme .evt p{
margin:0px;
padding:0px;
}

.programme .evt .date{
font-weight: 800;
color:#c5589c;
  }
.programme .now .evt .date{

color:#2f7c45;
  }
.programme .evt{
  margin-bottom:20px;
  margin: 0 auto;
  max-width: 70vw;
  width: 70vw;
  padding: 20px 0 20px 0;
  }

.programme .evt .titre{
  font-weight:800;
}
.programme .evt p.intervenant{
  font-style: italic;
  font-size:90%;
  }

  .programme .now{
    background-color:#95C11F;
    color:#fff;
  }
.programme{
    margin-top: -85vh !important;
    z-index: 200;
    /* position: absolute; */
    z-index: 200;
    top: 0px;
    /* position: absolute; */
    /* height: 40vh; */
    /* width: 100vw; */
    /* margin-top: 1em; */
    
    /* padding-right: 40vw; */
    font-size: 1.6em;
    line-height: 30px;
    
    display: flex;
    flex-direction: column;
}






iframe.lecteurpdf{
  display: none;
}



.spip_document_video , dl {
  /*background:#ccc;*/
 /* margin-top: 2em;*/
  /*margin-bottom: 2em;*/
margin-top:2em;
margin-bottom: 2em;
display: grid;
    grid-template-columns: 2fr 1fr;
    direction: rtl;
    width: 100%
  /*border-bottom:1px solid ;*/
}
.video-intrinsic-wrapper,.spip_doc_titre{
padding: 2em;
padding-left:0em;
background-color: #f5f5f5;
z-index:200;


}

.video-intrinsic-wrapper{
  padding: 0em;
}
.spip_doc_titre{
    text-align: right;
    padding-right: 10px;
    direction:ltr;

}
.spip_doc_titre strong{
    font-size: 1.2em;
    font-weight: 150;
}

dt img{
  border: 1px solid #888;
    padding: 5px;
    background-color: #fff;
    width: 100%
  
}

.survol:hover{
cursor: pointer;
}

.image_responsive img{
  width:100%;
  height: auto;
}

@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.fadeout{
  animation-name: fadeOutColor;
  animation-duration: 2s;
}

@keyframes fadeOutColor{
  0% {
    opacity:1;
  }
  50% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@keyframes fadeInColor{
  0% { 
    opacity:0;
  }
  50% {
    opacity:1;
    visibility:visible;
  }
  100% {
    opacity:1;
    visibility:visible;
  }
}

#page{
    z-index: 200;
    /* position: absolute; */
    z-index: 200;
    top: 0px;
    /* position: absolute; */
    height: 40vh;
    /* width: 100vw; */
    /* margin-top: 1em; */
    margin: 0 auto;
    /* padding-right: 40vw; */
    font-size: 1.6em;
    line-height: 30px;
    max-width: 70vw;
    display: flex;
    
  }
  #textpage{
    margin: auto 0;
    padding: 0;
    border: 0;
    /* vertical-align: baseline; */
    font: inherit;
    font-size: 100%
  }
#image{
  animation-name: fadeInColor;
  animation-duration: 1s;
  visibility:visible;
  z-index: 200;
    position: absolute;
    z-index: 200;
   top: 115px;
    position: absolute;
  height: 40vh;
    width: 100vw;
}
#image img{
width:100%;
position: absolute;
top: -50vh;
right: -50vh;
  }
#texte{
    z-index: 300;
    position: relative;
max-width: 70vw;
margin : 0 auto;
    background-color: #fff;
/*margin:2em;*/
    height:100vh;
    margin-top: -35vh;
animation-name: fadeInColor;
  animation-duration: 3s;


}

#texte ul.spip {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 15px;
}
.box{
background-color:#fff;
border:1px solid;
}


.grid-container * { 
 
 position: relative;
}

.big{
	font-size:90px;
	padding-top:0px!important;
}

.grid-container {
  height: 100vh; 
  margin: 0;
	grid-gap: 1em;
  display: grid;
  /*grid-template-columns: 100px 100px 100px 100px 100px 100px 1fr;*/
  /*grid-template-rows: 100px 100px 100px 100px 100px 1fr;*/
  grid-template-columns:repeat(7, 100px);
  grid-template-rows: repeat(20,100px );
  /*grid-template-areas: ". . . . . . ." ". . . . . . ." ". . . . . . ." ". . . . . . ." ". . . . . . ." ". . . . . . .";*/
}

div.fixed i{
  font-size:30px;
}
div.fixed.home {
padding-top: 30px;
}

 div.div,div.fixed{
margin: inherit;
text-align: center;
background-position: center;
;background-size: 70%;background-repeat: no-repeat;
   }
   div.fixed.home{
    padding-top:30px;
   }
div.div img,div.fixed img{
width:80%;
}
div.div p,div.fixed p{
margin-top:-10px;
padding-top:0px;
margin-top:80px;
color:#fff;
}

 div.fixed{

z-index: 3000;
position: relative;


 }

 .none{
display: none
 }

 .big p{
margin-top:35px!important;
color:#000!important;
 }
 div.focus1 {
  
  box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 50ms ease-in;
    -webkit-transform: scale(0.9);
    -ms-transition: all 50ms ease-in;
    -ms-transform: scale(0.9);   
    -moz-transition: all 50ms ease-in;
    -moz-transform: scale(0.9);
    transition: all 50ms ease-in;
    transform: scale(0.9);
  /*animation-iteration-count: infinite;*/
}

div.focus2 {
  
  
    /*z-index: 2;
    -webkit-transition: all 300ms ease-in;
    -webkit-transform: scale(20);
    -ms-transition: all 300ms ease-in;
    -ms-transform: scale(20);   
    -moz-transition: all 300ms ease-in;
    -moz-transform: scale(20);
    transition: all 300ms ease-in;
    transform: scale(8,8)  translate(40%, 40%);*/
    
    /*background-position:bottom 80% right -25%!important;*/
  /*animation-iteration-count: infinite;*/
}
/*div.focus2 { background-image: inherit!important; }*/
div.focus2 p { display: none }
div.div img {display: none}
div.focus2 img { 
  display:block;
  width:100px; 
  height:100px; 


}

div.bgnone{
  
  background-image: url()!important;
}
div.anime0 {
  
  -webkit-animation-name: fadeout; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 0s; /* Safari 4.0 - 8.0 */
  /*-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */*/
  animation-name: fadeout;
  animation-duration: 0s;
  visibility: hidden;
  /*animation-iteration-count: infinite;*/
}
div.anime1 {
  
  -webkit-animation-name: fadeout; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
  /*-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */*/
  animation-name: fadeout;
  animation-duration: 0.5s;
  visibility: hidden;
  /*animation-iteration-count: infinite;*/
}
div.anime2 {
  
  -webkit-animation-name: fadeout; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  /*-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */*/
  animation-name: fadeout;
  animation-duration: 1s;
  visibility: hidden;
  /*animation-iteration-count: infinite;*/
}
div.anime3 {
  
  -webkit-animation-name: fadeout; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1.5s; /* Safari 4.0 - 8.0 */
  /*-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */*/
  animation-name: fadeout;
  animation-duration: 1.5s;
  visibility: hidden;
  /*animation-iteration-count: infinite;*/
}


div.fadein0 {
  
  -webkit-animation-name: fadein; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 0s; /* Safari 4.0 - 8.0 */
  /*-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */*/
  animation-name: fadein;
  animation-duration: 0s;
  visibility: visible;
  /*animation-iteration-count: infinite;*/
}
div.fadein1 {
  
  -webkit-animation-name: fadein; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
  /*-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */*/
  animation-name: fadein;
  animation-duration: 0.5s;
  visibility: visible;
  /*animation-iteration-count: infinite;*/
}
div.fadein2 {
  
  -webkit-animation-name: fadein; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  /*-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */*/
  animation-name: fadeout;
  animation-duration: 1s;
  visibility: visible;
  /*animation-iteration-count: infinite;*/
}
div.fadein3 {
  
  -webkit-animation-name: fadein; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1.5s; /* Safari 4.0 - 8.0 */
  /*-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */*/
  animation-name: fadeout;
  animation-duration: 1.5s;
  visibility: visible;
  /*animation-iteration-count: infinite;*/
}

@-webkit-keyframes example {
  0%   { left:0px; top:0px;visibility: visible}
  25%  { left:0px; top:900px;}
  30%  {visibility: hidden;}
  
  
}

@-webkit-keyframes fadein {

  0%   { opacity:0;visibility: hidden}
  50%   { opacity:1;visibility: hidden}
  51%  { opacity:0.5; visibility: visible;}
  100%  {opacity:1;visibility: visible;}
  /*75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}*/
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes fadeout {

  0%   { opacity:1;visibility: visible}
  50%   { opacity:1;visibility: visible}
  51%  { opacity:0.5;}
  100%  {opacity:0;visibility: hidden;}
  /*75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}*/
}

@media (max-width: 700px ) {
  .programme{
    
    font-size: 1.3em;
    line-height: 1.3em;
    
 
}
  .btnUp{
color:#fff!important;
width:50px;
height:50px;
}
  .big {
    font-size:40px;
  }
  .big p {
    margin-top:15px!important;
  }
  #texte{
    z-index: 300;
    position: absolute;

    background-color: #fff;
margin:2em;
    height:100vh;
   margin-top: -45vh;
animation-name: fadeInColor;
  animation-duration: 3s;

}
  #image{
  animation-name: fadeInColor;
  animation-duration: 1s;
  visibility:visible;
  z-index: 200;
    position: absolute;
    z-index: 200;
   top: 65px;
    position: absolute;
  height: 40vh;
    width: 100vw;
}
#image img{
      width: 100%;
    position: absolute;
     top: 0vh; 
    right: -20vh;
}

#page{
        z-index: 200;
    position: absolute;
    z-index: 200;
    top: 0px;
    position: absolute;
    height: 40vh;
    max-width: 100vw;
    margin-left: 0em;
    padding-left: 1em;
    padding-right: 1em;
    font-size: 1.4em;
    line-height: 30px;
}
.grid-container {
  height: 100vh; 
  margin: 0;
  grid-gap: 0.5em;
  display: grid;
  /*grid-template-columns: 100px 100px 100px 100px 100px 100px 1fr;*/
  /*grid-template-rows: 100px 100px 100px 100px 100px 1fr;*/
  grid-template-columns:repeat(7, 47px);
  grid-template-rows:repeat(20, 47px  );
  /*grid-template-areas: ". . . . . . ." ". . . . . . ." ". . . . . . ." ". . . . . . ." ". . . . . . ." ". . . . . . .";*/

}
div.fixed {
  padding-top:10px;
  z-index:3000;
}
div.fixed.home {
padding-top: 10px;
}
p.title{
  display: none
}
div.fixed i{
  font-size:30px;
}
.spip_document_video,dl {
  /*background:#ccc;*/
 /* margin-top: 2em;*/
  /*margin-bottom: 2em;*/
margin-top:2em;
margin-bottom: 2em;
display: grid;
    grid-template-columns: 1fr;
width: 100%;
    direction: rtl;
  /*border-bottom:1px solid ;*/
}
dt{
  padding-left: 0em;
  padding-bottom: 0em;
}
dt.spip_doc_titre {
    text-align: right;
    padding-top: 0px;
    padding-right: 2em;
}

.image_responsive img {
     width: 100%; 
    height: auto;
}

#texte{
    z-index: 300;
    /*position: absolute;*/

margin : 2em;
    background-color: #fff;
/*margin:2em;*/
    height:100vh;
        margin-top: -45vh;
animation-name: fadeInColor;
  animation-duration: 3s;
  max-width: 100vw;

  }
}


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.grid-container {
  height: 100vh; 
  margin: 0;
  grid-gap: 0.8em;
  display: grid;
  /*grid-template-columns: 100px 100px 100px 100px 100px 100px 1fr;*/
  /*grid-template-rows: 100px 100px 100px 100px 100px 1fr;*/
  grid-template-columns:repeat(7, 90px);
  grid-template-rows:repeat(20, 90px  );
  /*grid-template-areas: ". . . . . . ." ". . . . . . ." ". . . . . . ." ". . . . . . ." ". . . . . . ." ". . . . . . .";*/

}

}

/* (1920x1080) Full HD Display */
@media (min-device-height: 1920px)  {
    .grid-container {
  height: 100vh; 
  margin: 0;
  grid-gap: 1em;
  display: grid;
  grid-template-columns: repeat(7, 140px);
    grid-template-rows: repeat(20, 140px );
}

div.div p, div.fixed p {
    margin-top: -10px;
    padding-top: 0px;
    margin-top: 120px;
    color: #fff;
}

.big{
 
  padding-top:0px!important;
      font-size: 150px;
    line-height: 70px;
}
#image{
top: 200px;

    height: 20vh;

  }
  #page{

    height: 20vh;
  
  }
  #texte{
        margin-top: -65vh;
  }
  .programme {
        margin-top: -90vh!important;
  }
  #image img {
    width: 100%;
    position: absolute;
    top: -30vh;
    right: -30vh;
}
}
@media (orientation: portrait) and (min-device-height: 1024px)  {
    .grid-container {
  height: 100vh; 
  margin: 0;
  grid-gap: 1em;
  display: grid;
  grid-template-columns: repeat(7, 140px);
    grid-template-rows: repeat(20, 140px );
}

div.div p, div.fixed p {
    margin-top: -10px;
    padding-top: 0px;
    margin-top: 120px;
    color: #fff;
}

.big{
 
  padding-top:0px!important;
      font-size: 150px;
    line-height: 70px;
}
#image{
top: 170px;

    height: 20vh;

  }
  #page{

    height: 20vh;
  
  }
  #texte{
        margin-top: -65vh;
  }
  .programme {
        margin-top: -90vh!important;
  }
  #image img {
    width: 100%;
    position: absolute;
    top: -30vh;
    right: -30vh;
}
}
/* @media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5)  {
    .grid-container {
  height: 100vh; 
  margin: 0;
  grid-gap: 1em;
  display: grid;
  grid-template-columns: repeat(7, 140px);
    grid-template-rows: repeat(20, 140px );
}

div.div p, div.fixed p {
    margin-top: -10px;
    padding-top: 0px;
    margin-top: 120px;
    color: #fff;
}

.big{
 
  padding-top:0px!important;
      font-size: 150px;
    line-height: 70px;
}
#image{
top: 170px;

    height: 20vh;

  }
  #page{

    height: 20vh;
  
  }
  #texte{
        margin-top: -55vh;
  }
  .programme {
        margin-top: -90vh!important;
  }
  #image img {
    width: 100%;
    position: absolute;
    top: -30vh;
    right: -30vh;
}
}*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.grid-container {
  height: 100vh; 
  margin: 0;
  grid-gap: 1em;
  display: grid;
  grid-template-columns: repeat(7, 100px);
    grid-template-rows: repeat(20, 100px );
}

div.div p, div.fixed p {
    margin-top: -10px;
    padding-top: 0px;
    margin-top: 120px;
    color: #fff;
}

.big{
 
  padding-top:0px!important;
      font-size: 100px;
    line-height: 40px;
}
#image{
top: 120px;

    height: 20vh;

  }
  #page{

    height: 20vh;
  
  }
  #texte{
            margin-top: -60vh;
  }
  .programme {
        margin-top: -85vh!important;
  }
  #image img {
    width: 100%;
    position: absolute;
    top: -30vh;
    right: -30vh;
}

@media ( max-width: 700px){

.modal {
    top: 0%!important;
    right: 10%!important;
    bottom: 20%!important;
    left: 10%!important;
    min-height: 100%!important;
    width: 80%!important;
}

}
@media only screen and (orientation: portrait) and (min-device-width : 768px) and (max-device-width : 1024px) {
#texte{
           margin-top: -65vh;
  }

}


}