/************* CASE STUDIES ********************************/

.iddesign-texte-projet {
	position:fixed;
	width:20%;
	top:13%;
	left:-28%;
	z-index:10020;
	font-family:Effra W01 Regular, Arial, Times, serif;
	font-size:14px;
	font-weight:normal;
	line-height:20px;
	color:#FFF;
	opacity:1;
	/* padding:0px 30px 0px 60px; */
	padding:0;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transition: left 0.4s 0.4s ease-out;
    -moz-transition: left 0.4s 0.4s ease-out;
    -o-transition: left 0.4s 0.4s ease-out;
    -ms-transition: left 0.4s 0.4s ease-out;
    transition: left 0.4s 0.4s ease-out;
}

#iddesign-container.active .iddesign-texte-projet {
	-webkit-transition: left 0.4s 2.3s ease-out;
    -moz-transition: left 0.4s 2.3s ease-out;
    -o-transition: left 0.4s 2.3s ease-out;
    -ms-transition: left 0.4s 2.3s ease-out;
    transition: left 0.4s 2.3s ease-out;
	left:7%;
}


#iddesign-container.active .afterswitch .iddesign-texte-projet {
	-webkit-transition: left 0.4s ease-out;
    -moz-transition: left 0.4s ease-out;
    -o-transition: left 0.4s ease-out;
    -ms-transition: left 0.4s ease-out;
    transition: left 0.4s ease-out;
	left:7%;
}

#iddesign-container.active .switch .iddesign-texte-projet {
	left:-28%;	
	-webkit-transition: left 0.4s 0.4s ease-out;
    -moz-transition: left 0.4s 0.4s ease-out;
    -o-transition: left 0.4s 0.4s ease-out;
    -ms-transition: left 0.4s 0.4s ease-out;
    transition: left 0.4s 0.4s ease-out;
}

.iddesign-texte-projet p.info {
	font-family:Effra W01 Regular, Arial, Times, serif;
	font-size:14px;
	font-weight:normal;
	line-height:20px;
	color:#FFF;
	opacity:0.6;	
	-moz-osx-font-smoothing: grayscale;
}

#iddesign-container h2 {
	font-size:30px;
	line-height:33px;
	letter-spacing:2px;
	text-transform:uppercase;
	color:#FFF;
	margin:0 0 30px 0;
	font-weight:normal;
	font-family:"Effra W01 Bold", Arial, sans-serif;
	-moz-osx-font-smoothing: grayscale;	
}	

.iddesign-texte-projet a {
	display:inline-block;
	color:#FFF;
	font-size:14px;
	font-weight:normal;
	opacity:0.9;
	line-height:27px;
	text-decoration:none;
	background: linear-gradient(to right, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.2) 50%);
	background-repeat: no-repeat;
	background-size: 200% 2px;
	background-position: right bottom;
	-moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
	-moz-osx-font-smoothing: grayscale;
}

.iddesign-texte-projet .agency a {
	background:none;
	color:#FFF;
	opacity:0.5;
	opacity:1;
	line-height:16px;
}

.iddesign-texte-projet a:hover {
	background-position: left bottom;
	opacity:1;
}

.iddesign-texte-projet p {
	line-height:16px;
	margin:0 0 6px 0;
	padding:0;
	font-size:12px;
	-moz-osx-font-smoothing: grayscale;
}

.iddesign-texte-projet p.role {
	color:#FFF;
	margin-top:30px;
	margin-bottom:15px;
	font-size:14px;
}

.iddesign-texte-projet p span {
	display:inline-block;
	width:60px;	
	font-size:12px;
	text-transform:uppercase;
	opacity:0.5;
}

.iddesigne-screens-projet .part {
	/* width:100%;
	max-width:800px;
	margin-bottom:40px;
	padding:40px 0 40px 0;
	text-align:center;
	background:rgba(0, 0, 0, 0.2);	
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0.2) 20%), linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
	background-size:60% 1px, 100% 100%, 60% 1px;
	background-position:center top, left center, center bottom;
	background-repeat:no-repeat, repeat-x, no-repeat; */
	background:none;
	margin:0 0 50px 0;
}

.iddesigne-screens-projet .part.postmobile {
	margin:-40px 0 50px 0;	
}

.iddesigne-screens-projet h3 {
	display:block;
	width:100%;
	margin:0;
	padding-top:100px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 1) 20%);
	background-size:2px 70px;
	background-position:center top;
	background-repeat:no-repeat; 
	text-align:center;
	font-size:26px;
	color:#FFF;
	font-family:"Effra W01 Regular", Arial, sans-serif;
	font-weight:normal;
	letter-spacing:2px;
	text-transform:uppercase;
	-webkit-font-smoothing:antialiased;
}

.iddesigne-screens-projet a.lien {
	display:inline-block;
	font-family: "Effra W01 Regular", Arial, Times, serif;
	font-size: 14px;
	font-weight: normal;
	color: #FFF;
	opacity: 0.5;	
	line-height:27px;
	text-decoration:none;
	-webkit-font-smoothing:antialiased;
	background: linear-gradient(to right, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.2) 50%);
	background-repeat: no-repeat;
	background-size: 200% 2px;
	background-position: right bottom;
	-moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.iddesigne-screens-projet a.lien:hover {
	opacity: 1;	
	background-position: left bottom;
}

.iddesigne-screens-projet {
	position:absolute;
	width:60%;
	max-width:1000px;
	//top:10%;
	top:100px;
	right:8%;
	z-index:10010;
	max-height:0;
	margin-bottom:0;
	padding-bottom:0px;
	overflow:hidden;
	text-align:center;
	opacity:0;
	-webkit-transition: max-height 0.8s 0s linear, opacity 0.8s 0s linear;
    -moz-transition: max-height 0.8s 0s cubic-bezier(0,.8,1,.48), opacity 0.8s 0s linear;
    -o-transition: max-height 0.8s 0s cubic-bezier(0,.8,1,.48), opacity 0.8s 0s linear;
    -ms-transition: max-height 0.8s 0s cubic-bezier(0,.8,1,.48), opacity 0.8s 0s linear;
    transition: max-height 0.8s 0s linear, opacity 0.8s 0s linear;	
}

#iddesign-container.active .iddesigne-screens-projet {
	max-height:15000px;
	padding-bottom:40px;
	opacity:1;
	-webkit-transition: max-height 3s 3s cubic-bezier(0,.8,1,.48), opacity 1s 3s ease-out;
    -moz-transition: max-height 3s 3s cubic-bezier(0,.8,1,.48), opacity 1s 3s ease-out;
    -o-transition: max-height 3s 3s cubic-bezier(0,.8,1,.48), opacity 1s 3s ease-out;
    -ms-transition: max-height 3s 3s cubic-bezier(0,.8,1,.48), opacity 1s 3s ease-out;
    transition: max-height 3s 3s cubic-bezier(0,.8,1,.48), opacity 1s 3s ease-out;	
}

#iddesign-container.active .afterswitch .iddesigne-screens-projet {
	max-height:15000px;
	opacity:1;	
	-webkit-transition: max-height 3s 0.4s cubic-bezier(0,.8,1,.48), opacity 1s 0.4s ease-out;
    -moz-transition: max-height 3s cubic-bezier(0,.8,1,.48), opacity 1s ease-out;
    -o-transition: max-height 3s cubic-bezier(0,.8,1,.48), opacity 1s ease-out;
    -ms-transition: max-height 3s cubic-bezier(0,.8,1,.48), opacity 1s ease-out;
    transition: max-height 3s 0.4s cubic-bezier(0,.8,1,.48), opacity 1s 0.4s ease-out;	
}

#iddesign-container.active .switch .iddesigne-screens-projet {
	max-height:0;
	opacity:0;	
	padding-bottom:0;
	-webkit-transition: max-height 0.4s 0s cubic-bezier(0,.8,1,.48), opacity 1s 0s ease-out;
    -moz-transition: max-height 0.4s 0s cubic-bezier(0,.8,1,.48), opacity 1s 0s ease-out;
    -o-transition: max-height 0.4s 0s cubic-bezier(0,.8,1,.48), opacity 1s 0s ease-out;
    -ms-transition: max-height 0.4s 0s cubic-bezier(0,.8,1,.48), opacity 1s 0s ease-out;
    transition: max-height 0.4s 0s cubic-bezier(0,.8,1,.48), opacity 1s 0s ease-out;	
}

.iddesigne-screens-projet div {
	width:100%;
	background:#eee;
	margin-bottom:70px;
	height:auto;
	max-height:auto;	
	overflow:hidden;
	position:relative;
}

.iddesigne-screens-projet div.capture {
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	padding-top: 23px;
	background: url(design/barnav.png) top left no-repeat;	
}

.iddesigne-screens-projet div.capture.clouvre {
	-webkit-border-top-left-radius: none;
	-webkit-border-top-right-radius: none;
	-moz-border-radius-topleft: none;
	-moz-border-radius-topright: none;
	border-top-left-radius: none;
	border-top-right-radius: none;
	padding-top:0;
	background:none;
}

.iddesigne-screens-projet div.capturemobile {
	background:none;
	max-width:730px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0;
}

.iddesigne-screens-projet div.limit800 {
	background:none;
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
}

.iddesigne-screens-projet div.captureipad {
	background:none;
	max-width:700px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:30px;
}

.iddesigne-screens-projet div.capturefinal {
	background:none;
	max-width:620px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0;
}


.iddesigne-screens-projet div img {
	width:100%;
	margin:0%;
	position:relative;
}

#iddesign-container #frame {
	position:fixed;	
	width:100%;
	height:100%;
	left:0%;
	top:0%;
	background:transparent;
	-webkit-transition: transform 0.8s 1.5s ease-out, background 0.8s 1.5s ease-out, border 0.5s 2.5s ease-out;
    -moz-transition: all 0.8s 1.5s ease-out;
    -o-transition: all 0.8s 1.5s ease-out;
    -ms-transition: all 0.8s 1.5s ease-out;
    transition: transform 0.8s 1.5s ease-out, background 0.8s 1.5s ease-out, border 0.5s 2.5s ease-out;
}

#iddesign-background {
	position:fixed;
	z-index:10003;
	top:0;
	left:-100%;
	width:100%;
	height:100%;
	background:#ddd;
	display:block;
	-webkit-transition: left 0.6s 1.2s ease-out, background 0s 2s;
    -moz-transition: left 0.6s 1.2s ease-out, background 0s 2s;
    -o-transition: left 0.6s 1.2s ease-out, background 0s 2s;
    -ms-transition: left 0.6s 1.2s ease-out, background 0s 2s;
    transition: left 0.6s 1.2s ease-out, background 0s 2s;
}

#iddesign-container.active #iddesign-background {
	z-index:10003;
	left:0;
	-webkit-transition: left 0.8s 1.5s ease-out, background 0s;
    -moz-transition: left 0.8s 1.5s ease-out, background 0s;
    -o-transition: left 0.8s 1.5s ease-out, background 0s;
    -ms-transition: left 0.8s 1.5s ease-out, background 0s;
    transition: left 0.8s 1.5s ease-out, background 0s;
}

//#iddesign-container.showproject #iddesign-background, #iddesign-container.active.showproject #iddesign-background { background:rgb(70, 63, 61); }


#iddesign-container.showproject #iddesign-background {
	-webkit-transition: left 0.6s 1.2s ease-out, background 0s;
    -moz-transition: left 0.6s 1.2s ease-out, background 0s;
    -o-transition: left 0.6s 1.2s ease-out, background 0s;
    -ms-transition: left 0.6s 1.2s ease-out, background 0s;
    transition: left 0.6s 1.2s ease-out, background 0s;
}

#iddesign-container.active #iddesign-background.switch {
	z-index:10005;
	left:0;
	-webkit-transition: background 0.7s 0.8s ease-out;
    -moz-transition: background 0.7s 0.8s ease-out;
    -o-transition: background 0.7s 0.8s ease-out;
    -ms-transition: background 0.7s 0.8s ease-out;
    transition: background 0.7s 0.8s ease-out;
}

#iddesign-whiteframe {
	position:fixed;
	z-index:10006;
	border:12px solid rgba(255,255,255,0.2);	
	width:100%;
	height:0;
	top:0;
	opacity:0;
	left:-1%;
	background:transparent;
	transform:scale(1.2);
	-ms-transform:scale(1.2);	
	-webkit-transform:scale(1.2); 	
	-webkit-transition: transform 0.8s ease-out, opacity 0s 0.8s ease-out, height 0s 0.8s ease-out;
    -moz-transition: transform 0.8s ease-out;
    -o-transition: transform 0.8s ease-out;
    -ms-transition: transform 0.8s ease-out;
    transition: transform 0.8s ease-out, opacity 0s 0.8s ease-out, height 0s 0.8s ease-out;
}

#iddesign-container.active #iddesign-whiteframe {
	z-index:10006;
	height:95%;
	opacity:1;
	transform:scale(0.92);
	-ms-transform:scale(0.92);	
	-webkit-transform:scale(0.92); 	
	-webkit-transition: transform 0.8s 2.3s ease-out, height 0s 2.3s ease-out, opacity 0s 2.3s ease-out;
    -moz-transition: transform 0.8s 2.3s ease-out, height 0s 2.3s ease-out, opacity 0s 2.3s ease-out;
    -o-transition: transform 0.8s 2.3s ease-out, height 0s 2.3s ease-out, opacity 0s 2.3s ease-out;
    -ms-transition: transform 0.8s 2.3s ease-out, height 0s 2.3s ease-out, opacity 0s 2.3s ease-out;
    transition: transform 0.8s 2.3s ease-out, height 0s 2.3s ease-out, opacity 0s 2.3s ease-out;
}

#iddesign-container .closecase {
	position:absolute;
	display:block;
	top:0;
	right:0;
	width:30px;
	height:30px;
	background:rgba(255,255,255,0.2);	
	cursor:pointer;
}

#iddesign-container .closecase img {
	position:absolute;
	right:4px;
	top:4px;	
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);	
	webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s;
}

#iddesign-container .closecase:hover img {
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);	
}


#iddesign-previous {
	position:absolute;
	cursor:pointer;
	width:12%;
	height:50px;
	background:rgba(0,0,0,0.15);
	bottom:0;
	left:0;	
	font-family:"Effra W01 Regular", Arial, sans-serif;
	font-size:11px;
	line-height:50px;
	text-transform:uppercase;
	letter-spacing:2px;
	//color:rgba(255,255,255,0.3);
	color:#fff;
	text-align:center;
	-webkit-font-smoothing:antialiased;
	background-position: left center;	
	background-size:300px 50px;
}

#iddesign-container.showproject #iddesign-previous:hover {
	cursor:pointer;
	webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	background-repeat: no-repeat;
	background-size:300px 50px;
	background-position: center center;	
}

#iddesign-container.showproject #iddesign-previous.opening:hover {
	webkit-transition: all 0.3s 2s ease-out;
	-moz-transition: all 0.3s 2s ease-out;
	-o-transition: all 0.3s 2s ease-out;
	-ms-transition: all 0.3s 2s ease-out;
	transition: all 0.3s 2s ease-out;
}

#iddesign-next {
	position:absolute;
	cursor:pointer;
	width:12%;
	height:50px;
	background:rgba(0,0,0,0.12);
	bottom:0;
	left:12%;	
	font-family:"Effra W01 Regular", Arial, sans-serif;
	font-size:11px;
	line-height:50px;
	text-transform:uppercase;
	letter-spacing:2px;
	//color:rgba(255,255,255,0.3);
	color:#fff;
	text-align:center;
	background-size:300px 50px;
	-webkit-font-smoothing:antialiased;
	background-position: right center;	
}

#iddesign-container.showproject #iddesign-next:hover {
	cursor:pointer;
	webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	background-repeat: no-repeat;
	background-size:300px 50px;
	background-position: center center;	
}

#iddesign-container.showproject #iddesign-next.opening:hover {
	webkit-transition: all 0.3s 2s ease-out;
	-moz-transition: all 0.3s 2s ease-out;
	-o-transition: all 0.3s 2s ease-out;
	-ms-transition: all 0.3s 2s ease-out;
	transition: all 0.3s 2s ease-out;
}


#iddesign-previous img {
	margin-right:10px;
	opacity:0.4;
}

#iddesign-next img {
	margin-left:10px;
	opacity:0.4;
}

#iddesign-previous:hover span, #iddesign-previous:hover img, #iddesign-next:hover span, #iddesign-next:hover img {
	opacity:0.9;
}


/************* PAGE BORDERS ********************************/

/*
#iddesign-container.showproject #iddesign-line1 { background: linear-gradient(to right, #ddd 50%, #463f3d 50%); }
#iddesign-container.showproject #iddesign-line2 { background: linear-gradient(to left, #ddd 50%, #463f3d 50%); }
#iddesign-container.showproject #iddesign-line3 { background: linear-gradient(to top, #ddd 50%, #463f3d 50%); }
#iddesign-container.showproject #iddesign-line4 { background: linear-gradient(to bottom, #ddd 50%, #463f3d 50%); }
*/


#iddesign-container.active #iddesign-line1, #iddesign-container.active #iddesign-line2, #iddesign-container.active #iddesign-line3, #iddesign-container.active #iddesign-line4 {
	background-repeat: no-repeat;
	background-size: 200% 200%;
}

#iddesign-container.showproject #iddesign-line1 {
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 200% 200%;
	-webkit-transition: background-position 0.2s 0.8s ease-out;
    -moz-transition: background-position 0.2s 0.2s ease-out;
    -o-transition: background-position 0.2s 0.2s ease-out;
    -ms-transition: background-position 0.2s 0.2s ease-out;
    transition: background-position 0.2s 0.8s ease-out;
}


#iddesign-container.showproject #iddesign-line2 {
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 200% 200%;
	-webkit-transition: background-position 0.6s 1.2s ease-out;
    -moz-transition: background-position 0.2s 0.6s ease-out;
    -o-transition: background-position 0.2s 0.6s ease-out;
    -ms-transition: background-position 0.2s 0.6s ease-out;
    transition: background-position 0.6s 1.2s ease-out;
}


#iddesign-container.showproject #iddesign-line3 {
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 200% 200%;
	-webkit-transition: background-position 0.2s 0.6s ease-out;
    -moz-transition: background-position 0.2s 0.6s ease-out;
    -o-transition: background-position 0.6s ease-out;
    -ms-transition: background-position 0.6s ease-out;
    transition: background-position 0.2s 0.6s ease-out;
}


#iddesign-container.showproject #iddesign-line4 {
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 200% 200%;
	-webkit-transition: background-position 0.2s 1s ease-out;
    -moz-transition: background-position 0.2s 0.4s ease-out;
    -o-transition: background-position 0.2s 0.4s ease-out;
    -ms-transition: background-position 0.2s 0.4s ease-out;
    transition: background-position 0.2s 1s ease-out; 
}

#iddesign-container #iddesign-line1 {
	position:fixed;	
	width:100%;
	height:16px;
	top:0px;
	z-index:10004;
	background: linear-gradient(to right, transparent 50%, transparent 50%);
	background-repeat: no-repeat;
	background-size: 200% 200%;
	background-position: left bottom;
	-webkit-transition: background-position 0.2s 0.8s ease-out;
    -moz-transition: background-position 0.2s 0.2s ease-out;
    -o-transition: background-position 0.2s 0.2s ease-out;
    -ms-transition: background-position 0.2s 0.2s ease-out;
    transition: background-position 0.2s 0.8s ease-out;
}

#iddesign-container #iddesign-line2 {
	position:fixed;	
	width:100%;
	height:16px;
	bottom:0px;
	z-index:10004;
	background: linear-gradient(to left, transparent 50%, transparent 50%);
	background-repeat: no-repeat;
	background-size: 200% 200%;
	background-position: right bottom;
	-webkit-transition: background-position 0.6s 1.2s ease-out;
    -moz-transition: background-position 0.2s 0.6s ease-out;
    -o-transition: background-position 0.2s 0.6s ease-out;
    -ms-transition: background-position 0.2s 0.6s ease-out;
    transition: background-position 0.6s 1.2s ease-out;
}

#iddesign-container #iddesign-line3 {
	position:fixed;	
	height:100%;
	width:16px;
	left:0px;
	top:0;
	z-index:10004;
	background: linear-gradient(to top, transparent 50%, transparent 50%);
	background-repeat: no-repeat;
	background-size: 100% 200%;
	background-position: center bottom;
	-webkit-transition: background-position 0.2s 0.6s ease-out;
    -moz-transition: background-position 0.2s 1s ease-out;
    -o-transition: background-position 0.2s ease-out;
    -ms-transition: background-position 0.2s ease-out;
    transition: background-position 0.2s 0.6s ease-out;
}

#iddesign-container #iddesign-line4 {
	position:fixed;	
	height:100%;
	width:16px;
	top:0;
	right:0px;
	z-index:10004;
	background: linear-gradient(to bottom, transparent 50%, transparent 50%);
	background-repeat: no-repeat;
	background-size: 100% 200%;
	background-position: center top;
	-webkit-transition: background-position 0.2s 1s ease-out;
    -moz-transition: background-position 0.2s 0.4s ease-out;
    -o-transition: background-position 0.2s 0.4s ease-out;
    -ms-transition: background-position 0.2s 0.4s ease-out;
    transition: background-position 0.2s 1s ease-out; 
}


#iddesign-container.active #iddesign-line4  { 
	background-position: center bottom; 
	-webkit-transition: background-position 0.2s 0.2s ease-out;
    -moz-transition: background-position 0.2s 0.2s ease-out;
    -o-transition: background-position 0.2s 0.2s ease-out;
    -ms-transition: background-position 0.2s 0.2s ease-out;
    transition: background-position 0.2s 0.2s ease-out; 
}

#iddesign-container.active #iddesign-line3  { 
	background-position: center top;
	-webkit-transition: background-position 0.2s 0.6s ease-out;
    -moz-transition: background-position 0.2s 0.6s ease-out;
    -o-transition: background-position 0.2s 0.6s ease-out;
    -ms-transition: background-position 0.2s 0.6s ease-out;
    transition: background-position 0.2s 0.6s ease-out;
}

#iddesign-container.active #iddesign-line2 { 
	background-position: left bottom;
	-webkit-transition: background-position 0.2s ease-out;
    -moz-transition: background-position 0.2s ease-out;
    -o-transition: background-position 0.2s ease-out;
    -ms-transition: background-position 0.2s ease-out;
    transition: background-position 0.2s ease-out; 
}

#iddesign-container.active #iddesign-line1  { 
	background-position: right bottom;
	-webkit-transition: background-position 0.2s 0.4s ease-out;
    -moz-transition: background-position 0.2s 0.4s ease-out;
    -o-transition: background-position 0.2s 0.4s ease-out;
    -ms-transition: background-position 0.2s 0.4s ease-out;
    transition: background-position 0.2s 0.4s ease-out;
}


@media screen and (min-width: 1400px){
	h2 {
		font-size:40px;
		line-height:44px;	
	}
	
	.iddesigne-screens-projet {
		right:8%;
	}
	
	.iddesign-texte-projet p.info {
		font-size: 16px;
		line-height: 24px;
	}
	
	.iddesign-texte-projet a, .iddesign-texte-projet p.role {
		font-size:16px;	
	}

	.iddesign-texte-projet p span, .iddesign-texte-projet p {
		font-size:14px;	
	}
	
	.iddesign-texte-projet p span {
		width:70px;	
	}
	
	.center {
		width:78%;
		margin-left:-39%;	
	}
}

@media screen and (min-width: 1720px){
	.iddesigne-screens-projet {
		right:10%;
	}
}


@media screen and (min-width: 1780px){
	.iddesigne-screens-projet {
		right:12%;
	}
}



@media screen and (min-width: 1560px) and (min-height: 840px) {
	.iddesign-texte-projet {
		top:17%;
	}
}


@media screen and (max-width: 1260px){
	.iddesign-texte-projet {
		width:25%;		   
	}
	
	.iddesigne-screens-projet {
		width:55%;	
	}
	
	.center {
		width:78%;
		margin-left:-39%;	
	}
}

/*************  MOBILE  *****************/
@media screen and (max-width: 960px){

	#iddesign-casestudies {
    	position: absolute;
    	top: 70px;
	}
	
	#iddesign-background, #iddesign-container.active #iddesign-background {
		position:fixed;
		z-index:10003;
		top: -100px;
		width:100%;
		height:200%;
		display:block;
	}
	
	.iddesign-texte-projet {
		position:relative;
		width:78%;
		text-align:center;	
	}
	
	.iddesigne-screens-projet {
		position:relative;
		margin:0 auto;
		width:78%;	
		top:0;
		right:0;
		text-align:center;
	}
	
	#iddesign-whiteframe {
		position:fixed;
		z-index:60000;
		border:none;
		width:100%;
		height:50px;
		//top:-50px;
		top:-23px;
		opacity:0;
		left:0;
		background:transparent;
		transform:none;
		-ms-transform:none;
		-webkit-transform:none;
		-webkit-transition: opacity 0.8s ease-out, top 0.8s ease-out, background 0.8s ease-out;
		-moz-transition: opacity 0.8s ease-out, top 0.8s ease-out, background 0.8s ease-out;
		-o-transition: opacity 0.8s ease-out, top 0.8s ease-out, background 0.8s ease-out;
		-ms-transition: opacity 0.8s ease-out, top 0.8s ease-out, background 0.8s ease-out;
		transition: opacity 0.8s ease-out, top 0.8s ease-out, background 0.8s ease-out;
	}
	
	#iddesign-container.active #whiteframe {
		z-index:60000;
		height:50px;
		opacity:1;
		top:0;
		transform:none;
		-ms-transform:none;
		-webkit-transform:none;
		-webkit-transition: top 0.8s 2.3s ease-out, opacity 0.8s 2.3s ease-out, background 0.8s 0.8s ease-out;
		-moz-transition: top 0.8s 2.3s ease-out, opacity 0.8s 2.3s ease-out, background 0.8s 0.8s ease-out;
		-o-transition: top 0.8s 2.3s ease-out, opacity 0.8s 2.3s ease-out, background 0.8s 0.8s ease-out;
		-ms-transition: top 0.8s 2.3s ease-out, opacity 0.8s 2.3s ease-out, background 0.8s 0.8s ease-out;
		transition: top 0.8s 2.3s ease-out, opacity 0.8s 2.3s ease-out, background 0.8s 0.8s ease-out;
	}
	
	#iddesign-container.showproject ##iddesign-whiteframe { background:rgb(70, 63, 61); }
	
	#iddesign-container.active .iddesign-texte-projet {		
		left: 0%;
		margin:100px 11% 30px 11%;
		-webkit-transition: margin 0.6s 1.5s ease-out;
    	-moz-transition: margin 0.6s 1.5s ease-out;
    	-o-transition: margin 0.6s 1.5s ease-out;
    	-ms-transition: margin 0.6s 1.5s ease-out;
    	transition: margin 0.6s 1.5s ease-out;
	}
	
	.iddesign-texte-projet {
		left: 0%;
		margin:100px auto 30px -90%;	
		-webkit-transition: margin 0.4s 0.4s ease-out;
		-moz-transition: margin 0.4s 0.4s ease-out;
		-o-transition: margin 0.4s 0.4s ease-out;
		-ms-transition: margin 0.4s 0.4s ease-out;
		transition: margin 0.4s 0.4s ease-out;
	}
	
	#iddesign-container.active .afterswitch .iddesign-texte-projet {
		margin:100px 11% 30px 11%;
		-webkit-transition: margin 0.4s ease-out;
		-moz-transition: margin 0.4s ease-out;
		-o-transition: margin 0.4s ease-out;
		-ms-transition: margin 0.4s ease-out;
		transition: margin 0.4s ease-out;
		left:0;
	}
	
	#iddesign-container.active .switch .iddesign-texte-projet {
		left:0;
		margin:100px auto 30px -90%;	
		-webkit-transition: margin 0.4s ease-out;
		-moz-transition: margin 0.4s ease-out;
		-o-transition: margin 0.4s ease-out;
		-ms-transition: margin 0.4s ease-out;
		transition: margin 0.4s ease-out;
	}
		
	#screens div {
		margin-bottom:20px;
	}
	
	

	
	#iddesign-previous, #iddesign-next {
		width:40%;	
		top:0;
	}
	
	#iddesign-previous {
		background:rgba(0,0,0,0.20);
		background-size:cover;	
		background-position: right center;	
		
	}
	
	#iddesign-next {
		left:40%;
		background:rgba(0,0,0,0.12);
		background-size:cover;	
		background-position: left center;	
	}
	
	#iddesign-container.showproject #iddesign-previous:hover {
		cursor:pointer;
		webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
		background-repeat: no-repeat;
		background-size:cover;	
		background-position: center center;	
	}

	#iddesign-container.showproject #iddesign-next:hover {
		cursor:pointer;
		webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
		background-repeat: no-repeat;
		background-size:cover;	
		background-position: center center;	
	}
	
	
	#iddesign-previous:hover span, #iddesign-next:hover span {
		opacity:1;
	}
	
	#iddesign-previous:hover img, #iddesign-next:hover img {
		opacity:0.4;
	}
	
	#iddesign-container .closecase {
		width:20%;
		height:50px;	
	}
	
	#iddesign-container .closecase img {
		position: absolute;
		left:50%;
		margin-left:-6px;
		top: 19px;
	}
}