{behavior: url(csshover.htc);}

#col_pensee{
	
 justify-content: center;
	display: grid;
	grid-template-columns: 20%; /* ne pas oublier de modifier la largeur de la photo dans .modalDialog > div {*/
  
}



/*fondu a l'affichage*/

		.fade-in {
		-webkit-animation-name: fadeInOpacity;
				animation-name: fadeInOpacity;
		-webkit-animation-iteration-count: 1;
				animation-iteration-count: 1;
		-webkit-animation-timing-function: ease-in;
				animation-timing-function: ease-in;
		-webkit-animation-duration: 5s;
				animation-duration: 5s;
  
		  }



		@-webkit-keyframes fadeInOpacity {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
  
		}

		@keyframes fadeInOpacity {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
		}
		
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 1%;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 20%; /* ne pas oublier de modifier la largeur de la photo dans .col_pensee */
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #92D050;
    border: 10px solid #92D050;
     -webkit-box-shadow: 0px 0px 10px #92D050;
     -moz-box-shadow: 0px 0px 10px #92D050;
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.close {
background: #92D050;
color: #E155C3;
line-height: 25px;
text-align: center;
float: right;
width: 25px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
margin: -35px -35px 0 0;
}
.close:hover { background: #C9A0DC; color: indigo;}

.box-modal{
	margin-top: 0px;
	Width: auto;
	color: black;
	background: #E155C3;
	border: 2px #E155C3;
	-webkit-border-radius: 15px ;
	-moz-border-radius: 15px ;
	border-radius: 15px ;
	font-size: 2em;
	
}

/*********************************************************
          para movil pantalla maximun de 340px
************************************************************/
@media only screen and (max-width: 340px) and (min-width: 5px){
	
#col_pensee{
	 justify-content: center;
	display: grid;
	grid-template-columns: 75%; /* ne pas oublier de modifier la largeur de la photo dans .modalDialog > div {*/
  
}

.modalDialog > div {
    width: 75%;
	position: relative;
    margin: 50% auto;
	 padding: 5px 10px 5px 10px;
	 border: 5px solid #92D050;
     -webkit-box-shadow: 0px 0px 5px #92D050;
     -moz-box-shadow: 0px 0px 5px #92D050;
    
}
.box-modal{
	-webkit-border-radius: 5px ;
	-moz-border-radius: 5px ;
	border-radius: 5px ;
	font-size: 1.8em;
}
}

/*********************************************************
          para movil pantalla maximun de 680px
************************************************************/
@media only screen and (max-width: 680px) and (min-width: 341px){
	
#col_pensee{
	 justify-content: center;
	display: grid;
	grid-template-columns: 60%; /* ne pas oublier de modifier la largeur de la photo dans .modalDialog > div {*/
  
}

.modalDialog > div {
    width: 60%;
	position: relative;
    margin: 30% auto;
	 padding: 5px 10px 5px 10px;
	 border: 5px solid #92D050;
     -webkit-box-shadow: 0px 0px 5px #92D050;
     -moz-box-shadow: 0px 0px 5px #92D050;
    
}
.box-modal{
	-webkit-border-radius: 5px ;
	-moz-border-radius: 5px ;
	border-radius: 5px ;
	font-size: 1.5em;
}
}

/*********************************************************
          para movil pantalla maximun de 680px
************************************************************/
@media only screen and (max-width: 1020px) and (min-width: 681px){
	
#col_pensee{
	 justify-content: center;
	display: grid;
	grid-template-columns: 40%px; /* ne pas oublier de modifier la largeur de la photo dans .modalDialog > div {*/
  
}

.modalDialog > div {
    width: 40%;
	position: relative;
    margin: 20% auto;
	 padding: 5px 10px 5px 10px;
	 border: 5px solid #92D050;
     -webkit-box-shadow: 0px 0px 5px #92D050;
     -moz-box-shadow: 0px 0px 5px #92D050;
    
}
.box-modal{
	-webkit-border-radius: 5px ;
	-moz-border-radius: 5px ;
	border-radius: 5px ;
	font-size: 1.5em;
}
}