@charset "UTF-8";
/* CSS Document */
body,html{
	background-color:#d8ded6;
	width:100%;
	height:100%;
	position:relative;
	margin:0;
	padding:0;
}

.invisible{display:none;}

#container{
	position:relative;
	padding:70px;
	height: calc(100% - 140px);
	     -webkit-transition: all 2s ease;
        -moz-transition: all 1s ease;
         -ms-transition: all 1s ease;
          -o-transition: all 1s ease;
             transition: all 1s ease;
}

#cartouche{
	position:absolute;
	background:#FFF;
	width: 18%;
	height: 0;
	padding-bottom: 18%;
	top:32%;
	left:50%;
	margin-left:-9%;
	z-index:3;
	text-align:center;
}

#diagonale{
	/*background: #000 none repeat scroll 0 0;*/
    left: 50%;
    margin-left: -18%;
    position: absolute;
    top: 20%;
    width: 26%;
    padding-bottom: 25%;
	height: 0;
    z-index: 2;
    -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
         -ms-transition: all 1s ease;
          -o-transition: all 1s ease;
             transition: all 1s ease;
}

#diagonale a{
	dipslay:inline-block;
	width:100px;
	height:100px;
}

#metier{
	height:100px;
	width:50px;
	left:10px;
	position:absolute;
	top:38%;
	z-index:3;
	-webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
         -ms-transition: all 1s ease;
          -o-transition: all 1s ease;
             transition: all 1s ease;
}

#artiste-bg {
    width: calc(100% - 140px);
    height: calc(100% - 140px);
    overflow: hidden;
    position: absolute;
    margin:auto;
    z-index:1;
    -webkit-transition: all 2s ease;
        -moz-transition: all 2s ease;
         -ms-transition: all 2s ease;
          -o-transition: all 2s ease;
             transition: all 2s ease;
    
}

#artiste-bg img{
	height: auto;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
	width: 100%;
}

@media (min-width: 1601px) {
	#diagonale img{
	width:450px;;
	}
	
	#container{
	position:relative;
	padding:70px 120px;
	height: calc(100% - 140px);
	}

	#diagonale{
	top:30%;
	margin-left:-225px;
	}
	
	#artiste-bg {
    width: calc(100% - 240px);
    height: calc(100% - 140px);
    overflow: hidden;
    position: absolute;
    margin:auto;
    z-index:1;
    
	}

	#artiste-bg img{
	height: auto;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
	max-width: 1500px;
	}
	
	#metier{
		height:100px;
		width:50px;
		left:140px;
		position:absolute;
		top:38%;
		z-index:3;
	}

}