/* Styles for the modal */

.md-modal {
	position: fixed;
	box-sizing:border-box;
	top: 50%;
	left: 50%;
	width:75%;
	height:75vh;
	min-width: 290px;
	overflow: hidden;
	box-shadow:0 0 20px rgba(15, 15, 15, 1);
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.md-show {
	visibility: visible;
}

.md-hide{
	visibility: hidden;
}

.md-overlay{
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	opacity: 0;
	background: rgba(29,29,29,0.8);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	z-index:1500;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}

/* modal-2 (mention légales) : Content styles */
.md-content {
	color: #fff;
	background: #FF5100;
	position: relative;
	overflow:hidden;
	border-radius: 0px;
	margin: -10px auto 0;
	padding:48px 120px 72px;
}

.md-content h4 {
	margin-bottom: 80px;
	text-align: center;
	font-size: 3rem; /*48px*/
	line-height:1.5rem; /*24px*/
	font-weight: 400;
	color:#fff;
	opacity: 0.8;
	background: #D64300;
}

.md-content > p {
	margin-bottom: 24px;
	padding: 0px 0;
	line-height:1.5rem; /*24px*/
	font-weight: 400;
	font-size: 1rem; /*16px*/
}

.md-content a{
	color:#fff;
}

.md-content a:hover, a:active, a:focus{
	color:#fff;
	text-decoration: underline;

}

.md-content > p:last-of-type {
	margin-bottom: 96px;
	
}

.md-content > ul {
	margin: 0;
	padding: 0 0 24px 48px;
}

.md-content > ul li {
	padding: 5px 0;
}

.md-content button {
	-webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
	border:solid 2px #FFFFFF;
	display: block;
	background:#FF5100;
	padding: 10px 20px;
	margin: 0 auto;
	font-size: 1rem; /*16px*/
	font-weight:700;
	color: #FFFFFF;
	font-family:'Rajdhani', sans-serif;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-transition: all 0.1s linear;
       -moz-transition: all 0.1s linear;
         -o-transition: all 0.1s linear;
            transition: all 0.1s linear;
  	/* *zoom: 1; */
}

.md-content button:hover,
.md-content button:active,
.md-content button:focus {
	background-color: #FFFFFF;
	color:#FF5100;
}

/* Individual modal styles with animations/transitions */
/* Effect 3: Slide from the bottom */
.md-effect-3 .md-content {
	-webkit-transform: translateY(20%);
	-moz-transform: translateY(20%);
	-ms-transform: translateY(20%);
	transform: translateY(20%);
	opacity: 0;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.md-show.md-effect-3 .md-content {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}


/*modal-1 (Galeries) : Content style*/
.md-content-2{
	position: fixed;
	overflow:hidden;
	background-color: #1d1d1d;
	/*margin:-10px auto 10px;*/
	box-sizing: border-box;
	width:100%;
	height:100%;
}

.col-textes-30{
	/*position:absolute;*/
	box-sizing:border-box;
	/*float:left;*/
	display:inline-block;
	vertical-align: top;
	width:30%;
	height:75vh;
	/*margin: -10px 0 0;*/
	padding:120px 0 120px 120px;
}

.col-textes-30 h3 {
	margin-bottom: 24px;
	font-family:'Rajdhani', sans-serif;
	font-size: 3rem; /*48px*/
	font-weight: 300;
	line-height:1.5rem; /*24px*/
	text-align:left;
	color:#fff;
	text-transform: none;
}

.col-textes-30 h5 {
	font-family:'Rajdhani', sans-serif;
	color:#a9b2b7;
	font-size: 1.25rem; /*20px*/
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 48px;
}

.col-textes-30 h4{
	font-family:'Titillium Web' , sans-serif;
	margin-bottom: 48px;
	font-size: 2rem; /*32px*/
	font-weight: 400;
	line-height:1.5rem; /*24px*/
	text-align:left;
	color:#ff5100;
}

.col-textes-30 p {
	font-family: 'Rajdhani' , sans-serif;
	font-weight: 500;
	line-height:1.5rem; /*24px*/
	text-align:left;
	font-size: 1rem; /*16px*/
	color:#777b7f;
	margin:0px;
}

/*.md-content-2 > p:last-of-type {
	/*margin-bottom: 96px;
}

.md-content-2 > ul {
	margin: 0;
	padding: 0 0 28px 48px;
}

.md-content-2 > ul li {
	padding: 5px 0;
}*/

.col-textes-30 .groupbout{
	position:absolute;
	vertical-align: bottom;
	bottom: 120px;
}

.col-textes-30 .groupbout button{
	position:relative;
	display: inline-block;
	margin: 0 10px 0 0;
	-webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
	border:solid 1px #FFFFFF;
	box-sizing:border-box;
	background-color:#1d1d1d;
	padding: 9px 18px;
	/*outline:20px solid #1d1d1d;*/
	font-size: 1.5rem; /*24px*/
	color: #FFFFFF;
	cursor: pointer;
	z-index: 2300;
	-webkit-transition: all 0.3s ease-out 0s;
       -moz-transition: all 0.3s ease-out 0s;
         -o-transition: all 0.3s ease-out 0s;
			transition: all 0.3s ease-out 0s;
  	/* *zoom: 1; */
}

.col-textes-30  button:hover,
.col-textes-30  button:active,
.col-textes-30  button:focus {
	background-color: #FFFFFF;
	color:#FF5100;
}

.col-textes-30 .groupbout button:last-child{
	margin: 0 0px 0 0;
}

.col-textes-30 button.sp{
	padding: 9px 9px;
}


.col-images-70 {
	box-sizing:border-box;
	overflow:hidden;
	width:70%;
	height:75vh;
	float:right;
	display:block;
	/*vertical-align: top;*/
}

.col-images-70 .image-galerie{
	float:right;
	display: block;
	max-width: 100%;
	width:903px;
}


.g1a{
	height:645px;
	background: url(../img/work/full/p-annonce_presse-aig_vie-full.jpg) no-repeat top right;
	background-size: auto 100%;
	margin:40px 120px 40px 0;
}

.g1b{
	height:483px;
	background: url(../img/work/full/d-illustration-net77-full.jpg) no-repeat top right;
	background-size: 90% auto;
	margin:80px 120px 0px 0;
}

.g1b2{
	height:483px;
	background: url(../img/work/full/d-infographie-net101-full.jpg) no-repeat top right;
	background-size: 90% auto;
	margin:80px 120px 0px 0;
}

.g1c{
	width:903px;
	height:544px;
	background: url(../img/work/full/w-background-cotecosy-full.png) no-repeat top right;
	background-size: 100% auto;
	margin:90px 60px 0px 0px;
}

.g1d{
	height:645px;
	background: url(../img/work/full/p-brochure-valeska_gert-full.jpg) no-repeat top right;
	background-size: auto 90%;
	margin:80px 120px 0px 0;
}

.g1e{
	height:645px;
	background: url(../img/work/full/w-newsletter01-cotecosy-full.jpg) no-repeat top right;
	background-size: auto 90%;
	margin:40px 120px 0px;
}

.g1e2{
	height:645px;
	background: url(../img/work/full/w-newsletter02-cotecosy-full.jpg) no-repeat top right;
	background-size: auto 90%;
	margin:40px 120px 0px;
}

.g1e3{
	height:645px;
	background: url(../img/work/full/w-newsletter03-cotecosy-full.jpg) no-repeat top right;
	background-size: auto 90%;
	margin:40px 120px 0px;
}

.g1f{
	height:553px;
	background: url(../img/work/full/p-cd-raphael_daugas-full.jpg) no-repeat top right;
	background-size: auto 90%;
	margin:110px 110px 0px;
}

.g1g{
	width:903px;
	height:544px;
	background: url(../img/work/full/w-site-cub-full.png) no-repeat top right;
	background-size: 100% auto;
	margin:90px 60px 0px 0px;
}

/*.md-content-2 .col-images-70 .image-galerie-1i{
	float:right;
	width:566px;
	max-width: 100%;
	height:800px;
	background: url(../img/work/full/w-newsletter03-cotecosy-full.jpg) no-repeat top right;
	background-size: auto 632px;
	margin:48px 120px 0px;
	display: block;
}*/

.g1h{
	height:645px;
	background: url(../img/work/full/p-cover-net107-full.jpg) no-repeat top right;
	background-size: auto 90%;
	margin:48px 120px 0px;
}

/*.md-content-2 .col-images-70 .image-galerie-1k{
	float:right;
	width:566px;
	max-width: 100%;
	height:800px;
	background: url(../img/work/full/d-infographie-net101-full.jpg) no-repeat top right;
	background-size: auto 632px;
	margin:48px 120px 0px;
	display: block;
}*/

.g1i{
	width:903px;
	height:624px;
	background: url(../img/work/full/w-site-calfati-full.png) no-repeat top right;
	background-size: 100% auto;
	margin:60px 60px 0px 0px;
}

.g1j{
	height:610px;
	background: url(../img/work/full/d-affiche-fete_de_la_fraise-full.png) no-repeat top right;
	background-size: auto 100%;
	margin:60px 120px 0px 0px;
}

.g1k{
	height:60px;
	background: url(../img/work/full/d-banniere-a-auchan_full_banner.gif) no-repeat top right;
	background-size: auto 100%;
	margin:40px 120px 0px;
}

.g1k2{
	height:60px;
	background: url(../img/work/full/d-banniere_eco_emballage468x60.html) no-repeat top right;
	background-size: auto 100%;
	margin:40px 120px 0px;

}

.g1k3{
	height:250px;
	background: url(../img/work/full/d-banniere_eco_emballage300x250.html) no-repeat top right;
	background-size: auto 100%;
	margin:40px 120px 0px;
}

.g1k4{
	height:645px;
	background: url(../img/work/full/w-bannieres-cotecosy-full.jpg) no-repeat top right;
	background-size: auto 90%;
	margin:48px 120px 0px;
}

.g1l{
	width:903px;
	height:624px;
	background: url(../img/work/full/w-site-cotecosy-full.png) no-repeat top right;
	background-size: 100% auto;
	margin:60px 60px 0px 0px;
}


/* Individual modal styles with animations/transitions */
.md-effect-1 .md-content-2 {
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	transform: scale(0.7);
	opacity: 0;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.md-show.md-effect-1  .md-content-2 {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}


/* Responsive */
@media (min-width: 768px) and (max-width: 991px){
	.md-modal {
		width:90%;
		height:70%;
	}

	.md-content {
		font-size:95%;
		padding:24px 60px 36px;
	}

	.md-content-2 {
		font-size:90%;
		padding:0px 5px 0px 0px;
		display:flex;
		flex-flow:row wrap;
	}
	
	.col-textes-30{
		width:35%;
		height:75vh;
		padding:30px 20px 0px 20px;
	}

	.col-textes-30 h3 {
		margin-bottom: 24px;
		font-size: 3rem; /*48px*/
		line-height:3rem; /*48px*/
	}

	.col-textes-30 h5 {
		font-size: 1.25rem; /*20px*/
		margin-bottom: 48px;
	}

	.col-textes-30 h4{
		margin-bottom: 48px;
		font-size: 2rem; /*32px*/
		line-height:2rem; /*32px*/
	}

	.col-textes-30 p {
		line-height:1.5rem; /*24px*/
		font-size: 1rem; /*16px*/
		margin:0px;
	}
	
	.col-textes-30 .groupbout{
		bottom: 30px;
	}

	.col-textes-30 .groupbout button{
		margin: 0 10px 0 0;
		padding: 6px 10px;
		font-size: 1.125rem; /*20px*/
	}

	.col-textes-30 .groupbout button:last-child{
		margin: 0 0px 0 0;
	}

	.col-textes-30 button.sp{
		padding: 6px 8px;
	}
	
	.col-images-70 {
		width:65%;
		height:75vh;
	}

	.col-images-70 .image-galerie{
		max-width: 90%;
		width:903px;
	}
	
	.g1a{
		height:645px;
		background: url(../img/work/full/p-annonce_presse-aig_vie-full.jpg) no-repeat top right;
		background-size: auto 90%;
		margin:35px 20px 30px 0;
	}
	
	.g1b{
		height:283px;
		background: url(../img/work/full/d-illustration-net77-full.jpg) no-repeat top right;
		background-size: 100% auto;
		margin:60px 20px 30px 0;
	}

	.g1b2{
		height:283px;
		background: url(../img/work/full/d-infographie-net101-full.jpg) no-repeat top right;
		background-size: 100% auto;
		margin:0px 20px 0px 0;
	}

	.g1c{
		height:283px;
		background: url(../img/work/full/w-background-cotecosy-full.png) no-repeat top right;
		background-size: 100% auto;
		margin:240px 30px 0px 0px;
	}

	.g1d{
		height:645px;
		background: url(../img/work/full/p-brochure-valeska_gert-full.jpg) no-repeat top right;
		background-size: auto 66%;
		margin:65px 20px 0px 0;
	}

	.g1e{
		height:645px;
		background: url(../img/work/full/w-newsletter01-cotecosy-full.jpg) no-repeat top right;
		background-size: auto 90%;
		margin:40px 120px 0px;
	}

	.g1e2{
		height:645px;
		background: url(../img/work/full/w-newsletter02-cotecosy-full.jpg) no-repeat top right;
		background-size: auto 90%;
		margin:40px 120px 0px;
	}

	.g1e3{
		height:645px;
		background: url(../img/work/full/w-newsletter03-cotecosy-full.jpg) no-repeat top right;
		background-size: auto 90%;
		margin:40px 120px 0px;
	}
/*
	.g1f{
		height:553px;
		background: url(../img/work/full/p-cd-raphael_daugas-full.jpg) no-repeat top right;
		background-size: auto 90%;
		margin:110px 20px 0px;
	}*/

	.g1l{
		width:903px;
		height:624px;
		background: url(../img/work/full/w-site-cotecosy-full.png) no-repeat top right;
		background-size: 100% auto;
		margin:90px 20px 0px 0px;
	}

	.g1h{
		height:645px;
		background: url(../img/work/full/p-cover-net107-full.jpg) no-repeat top right;
		background-size: auto 75%;
		margin:72px 20px 0px;
	}
	
	.g1i{
		width:903px;
		height:424px;
		background: url(../img/work/full/w-site-calfati-full.png) no-repeat top right;
		background-size: 100% auto;
		margin:290px 20px 0px 0px;
	}
/*
	.g1j{
		height:645px;
		background: url(../img/work/full/d-affiche-fete_de_la_fraise-full.png) no-repeat top right;
		background-size: auto 76%;
		margin:70px -20px 0px 0px;
	}
*/

}

@media (min-width: 576px) and (max-width: 767px){
	.md-modal {
		width:80%;
		height:70%;
	}

	.md-content {
		padding:24px 30px 36px;
	}

	.md-content h4 {
		font-size: 3rem; /*48px*/
		line-height:3rem; /*48px*/
	}
}

@media (min-width: 320px)and (max-width: 575px){
	.md-modal {
		width:80%;
		height:70%;
	}

	.md-content {
		padding:24px 15px 36px;
	}

	.md-content h4 {
		font-size: 3rem; /*48px*/
		line-height:3rem; /*48px*/
	}
}