#connaitre{
    background: url(../img/savoirpageconnaitre.png) no-repeat;
    width: 1920px;
    height: 1080px;
    position:relative
}

#conn-boutonretour{
    width: 133px;
    height: 241px;
    top:0;
    right: 0;
    position: absolute;
    cursor: pointer;
}

#conn-boutonconnaitre{
    width:412px;
    height: 459px;
    left: 139px;
    top: 249px;
    position: absolute;
}

#conn-corse{
    position: absolute;
    width:470px;
    height: 647px;
    top: 0px;
    left: 274px;
    z-index: 10;
}


#conn-plusgrand{
    position: absolute;
    width:412px;
    height:357px;
    top: 250px;
    left: 551px;
    animation: fadeIn 1s; 
    cursor: pointer;
    z-index: 1;
}

#conn-oiseaumaquille{
    position: absolute;
    width:412px;
    height:357px;
    top: 70px;
    left: 864px;
    animation: fadeIn 3s; 
    cursor: pointer;
    z-index: 1;
}


#conn-casseurdos{
    position: absolute;
    width:412px;
    height:357px;
    top: 251px;
    left: 1177px;
    animation: fadeIn 7s; 
    cursor: pointer;
    z-index: 1;
}

#conn-montagnard{
    position: absolute;
    width:412px;
    height:357px;
    top: 430px;
    left: 864px;
    animation: fadeIn 6s; 
    cursor: pointer;
    z-index: 1;
}

#conn-trencalos{
    position: absolute;
    width:412px;
    height:357px;
    top: 611px;
    left: 552px;
    animation: fadeIn 4s; 
    cursor: pointer;
    z-index: 1;
}

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


@media screen and (max-width :1334px){
    #connaitre{
        width: 1334px;
        height: 800px;
        background: url(../img/connaitre-tab-bg.png) no-repeat;
    }

    #conn-boutonretour{
        width: 88px;
        height: 172px;
    }

    #conn-boutonconnaitre{
        display: none;     
    }
    
    #conn-corse{
        width:349px;
        height: auto;
        top: 0px;
        left: 202px;
    }

    #conn-plusgrand, #conn-oiseaumaquille, #conn-casseurdos, #conn-montagnard, #conn-trencalos{
        width:307px;
        height:265px;
        
    }

    #conn-plusgrand{      
        top: 186px;
        left: 404px;
    }

  #conn-oiseaumaquille{
        top: 53px;
        left: 638px;
  }

  #conn-casseurdos{
    top: 188px;
    left: 872px;
  } 
  
  #conn-montagnard{
    top: 322px;
    left: 638px;
  } 
  
  #conn-trencalos{
    top: 455px;
    left: 404px;
  }


}