/*

	Supersized - Fullscreen Slideshow jQuery Plugin
	Version : Core 3.2.1
	
	Site	: www.buildinternet.com/project/supersized
	Author	: Sam Dunn
	Company : One Mighty Roar (www.onemightyroar.com)
	License : MIT License / GPL License
	
*/


body 
{ background:url(raw0098.jpg); height:100%; }

  
mark{
    background-color:   black;
    color: white;
    
  font-size: 19px;
  Text-align:center;
 font-family: "Courier New" ,monospace;
}
	
#supersized-loader 
{ position:absolute; top:50%; left:50%; z-index:0; width:100px; height:100px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress-3.gif) no-repeat center center;}
	
#supersized { position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
		
#supersized img{ width:auto; height:auto; position:relative; outline:none; border:none; }
		
#supersized a { z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; display:block; }

#supersized a.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }

.hide {

  color: black;
  display: none;
    
}

.parent {
    
  width: 100%;
  height: 100vh;
}

.parent:hover > .hide{
  
 display: block;
    margin-left: 4px;
    margin-top: 12px;
}

.menu
{
    margin-bottom: 40px;
   
}
.menu_hover
{
 
    margin-bottom: 40px;
visibility: hidden;   
}


 
.img_description {
  position: absolute;
top:92px;
  left: 0;
  right:0;
  color:white;
 
  visibility: hidden;
  font-size: 19px;
  Text-align:center;
 font-family: "Courier New" ,monospace;

opacity: 1;
 /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
    opacity: 1;
    z-index: 9999999999999;
          text-shadow: -1px 1px 0 #000, 
                          1px 1px 0 #000, 
                         1px -1px 0 #000, 
                        -1px -1px 0 #000; 

}

.img_description_buddy {
  position: absolute;
top:92px;
  left: 0;
  right:0;
  color:white;
 
  visibility: hidden;
  font-size: 19px;
  Text-align:center;
 font-family: "Courier New" ,monospace;


 /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;

    z-index: 9999999999999;
  

}

  .container {
       
         opacity: 1;
      margin-bottom: 15px;
        position: relative;
  height: 218px;
  width: 300px;

        }

        .container img {
          
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
             opacity: 1;
        }

        .container img:first-child {

            opacity: 1;
            z-index: 1; /* La première image est au-dessus */
        }

        .container img:last-child {
      
            z-index: 9999999;
            /* La deuxième image est en dessous */
        }

.mdap {
  position: absolute;
top:92px;
  left: 7px;
  right:0;
  color: white;
  
  visibility: hidden;
  font-size: 19px;
  Text-align:left;
 font-family: "Courier New";
 /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
    opacity: 1;

}

.mdap2 {
  position: absolute;
top:92px;
  left: 0;
  right:5px;
  color: white;
  
  visibility: hidden;
  font-size: 19px;
  Text-align:right;
 font-family: "Courier New";
 /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
    opacity: 1;

}

.container
{


}
 
.container_camera
{
  position: relative;
  height: 230px;
  width: 300px;
    padding-left: 2%;

}
 
.container:hover .menu_hover
{
    margin-bottom: 40px;
visibility: visible;  
    opacity: 0.95;
   
}



.container:hover .img_description

{
    visibility: visible;


    visibility: visible;
    opacity: 0.8;
    z-index:9999999;
}

.container:hover .img_description_buddy

{
    visibility: visible;


    visibility: visible;
    opacity: 0.8;
    z-index:9999999;
}
container:hover
{
    
    background-color: black;
    visibility: visible;
    opacity: 1;
    z-index:9999999;
    
    
}

.container:hover .mdap

{

    visibility: visible;
  

    visibility: visible;
    opacity: 0.8;
    z-index:9999999;
    
}

.container:hover .mdap2

{
    

visibility: visible;
    opacity: 0.8;
    z-index:9999999999;
    
}

.container_camera:hover .menu  
{
  opacity: 0.8;
    cursor: pointer; 
   /* box-shadow:  0px 0px 5px blue, 2px 0px 5px red, 4px 0px 5px green;*/
    /* box-shadow:  0px 10px 25px white;*/
    visibility: visible;
    
  
}
.container_camera:hover .img_description

{
    visibility: visible;
     opacity: 0.8;    
    
}

.container_camera:hover .img_description_buddy

{
    visibility: visible;
     opacity: 0.8;    
    
}

@media (pointer:coarse) {

      .container {
       
         opacity: 1;
      margin-bottom: 15px;
        position: relative;
  height: 87px;
  width: 120px;

        }
    
    .img_description {
        top:38%;
  position: absolute;

  left: 0;
  right:0;
  color:white;
 
  visibility: visible;
  font-size: 10px;
  Text-align:center;
 font-family: "Courier New" ,monospace;

opacity: 1;
 /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
    opacity: 1;
    z-index: 9999999999999;
          text-shadow: -1px 1px 0 #000, 
                          1px 1px 0 #000, 
                         1px -1px 0 #000, 
                        -1px -1px 0 #000; 

}
    
        .img_description_buddy {
        top:38%;
  position: absolute;

  left: 0;
  right:0;
  color:white;
 
  visibility: visible;
  font-size: 10px;
  Text-align:center;
 font-family: "Courier New" ,monospace;

opacity: 1;
 /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
    opacity: 1;
    z-index: 9999999999999;
          

}
    
    mark{
         background-color:   black;
    color: white;
    
  font-size: 10px;
  Text-align:center;
 font-family: "Courier New" ,monospace;
    }
    
    .hide{
        display: block;
    }

    .menu_hover{
        visibility: hidden;
         opacity: 0;
    animation: fade-in-out 4s infinite; /* 3-second delay */
    }
    
    
    
@keyframes fade-in-out {
    0% {
        opacity: 0;
    }
    50% {
        visibility: visible;
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
    

    
    
    #supersized-loader 
{ visibility: hidden; position:absolute; top:50%; left:50%; z-index:0; width:100px; height:100px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress-3.gif) no-repeat center center;}
    
 }