/*
#g1{
    margin: 0;
    padding: 0;
    position:relative;
    top: 0px;
    left:0px;
    width: 100vw;
    height: 50%;
 background-color: darkslategray;   
}

#g2{
 background-color: #008800;
    background-color: rgba(0, 200, 0, 0.4);
    position: relative;
    display:block;
    height: 500px;
    width: 500px;
}

.bloc				{ position: relative; background: #209720; padding: 15px; }
.bloc:after,
.bloc:before		{ content: " "; position: absolute; width: 150px; height: 200px; z-index: -10; background-color: yellow; }  
.bloc:before		{  }  
.bloc:after			{  }

.curve				{  }
.curve:before		{ bottom: 7px; left: 5px; transform: rotate(-5deg); -moz-transform: rotate(-5deg); box-shadow: 7px 6px 15px #333; -moz-box-shadow: 7px 6px 15px #333; }  
.curve:after		{ bottom: 7px; right: 5px; transform: rotate(5deg); -moz-transform: rotate(5deg); box-shadow: -7px 6px 15px #333;	-moz-box-shadow: -7px 6px 15px #333; }


.demo 
{
  margin-bottom:0px;
  position:relative;
  width:auto; 
  height:400px;
  overflow:hidden;	
}
.demo img 
{
  float: left;	
  margin:0;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  border:none;	
}
.demo a:hover img 
{
  margin-top:-400px;
}

*/

body {
  background: #8e8e8e;
  text-align: center;
}

img {
  /*max-height: 90%;
  max-width: 90%;*/
    /*height: 500px;
  width: 500px;*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  /*border: 2px solid rgb(0,0,0);*/
}


.img-1 {
  /*border: 2px solid rgba(2,40,200,0.12);*/
    /*border: 2px solid rgba(255,255,255,0.12);*/
  transition: all 1.8s cubic-bezier(.25,.8,.25,1);
}

.img-1:hover {
  border: 0px solid rgba(0,0,0,0.25);
}

.img-2 {
  border: 2px solid rgba(0,0,0,0.16);
}

.img-3 {
  border: 2px solid rgba(0,0,0,0.19);
}

.img-4 {
  border: 2px solid rgba(0,0,0,0.25);
}

.img-5 {
  border: 2px solid rgba(0,0,0,0.30);
}


.avertissement {
  /*max-height: 90%;
  max-width: 90%;*/
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #f00;
  border-radius: 2px;
  display:flex;
  /*height: 500px;
  width: 500px;*/
}

.avert_wrapper {
    
}

.ak7pt {
    
}


.card {
  /*max-height: 90%;
  max-width: 90%;*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #8e8e8e;
  border-radius: 2px;
  display: inline-block;
  /*height: 500px;
  width: 500px;*/
}


/*Styles spécifiques pour les grands écrans type écrans d'ordinateur*/
@media screen and (min-width: 980px){
.img { 
  height: 500px;
  width: 500px;
}    
.card { 
  height: 500px;
  width: 500px;
}    
}

/*Styles spécifiques pour les écrans de taille moyenne type tablette*/
@media screen and (min-width: 600px) and (max-width: 979px){
.img { 
  height: 400px;
  width: 400px;
}    
.card { 
  height: 400px;
  width: 400px;
}    
}

@media only screen 
and (min-device-width : 200px) 
and (max-device-width : 599px) { 
.img { 
  height: 220px;
  width: 220px;
}    
.card { 
  height: 220px;
  width: 220px;
}

}

/*.card-1 {
  box-shadow: 0 1px 3px rgba(255,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.8s cubic-bezier(.25,.8,.25,1);
}*/

.card-1 {
  /*box-shadow: 0 0px 0px rgba(0,40,200,0.12), 0 0px 0px rgba(0,0,0,0.24);*/
  /*transition: all 1.8s cubic-bezier(.25,.8,.25,1);*/
}

.card-1:hover {
    /*background: rgba(255,255,255,0.0);*/
  /*box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);*/
}

.card-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.card-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.card-4 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-5 {
    background: rgba(255,255,255,0.30);
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}