html,
body {
    height: 100%;
    background: #f2f2f2;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

/* Controls
---------------------------------------------------------------------- */
.controls {
	display:inline-block;
    padding: 1rem;
    background: #0b2635;
	width:9.5%;
	position:absolute;
	right:0;
	top:0;
	height:100%;
	padding-top:35vh;
}

.control {
    position: relative;
    display: block;
    padding:8px 12px;
    background:transparent;
    cursor: pointer;
	font-size:15px;
    color: white;
    transition: background 150ms;
	margin:auto;
	width:auto;
	border-radius:40px;
	border: solid 2px #0b2635;
	margin-top:10px;
	-webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.control:hover {
    border: solid 2px #dd1931;
}

/*.control[data-filter]:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
    border: 2px solid currentColor;
    border-radius: 2px;
    background: currentColor;
    transition: background-color 150ms, border-color 150ms;
}

.control[data-sort]:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: 2px solid;
    border-left: 2px solid;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
    transform:  translateY(1px) rotate(45deg);
}

.control[data-sort*=":desc"]:after {
    transform:  translateY(-4px) rotate(-135deg);
}*/

.mixitup-control-active {
    background: #dd1931;
	border: solid 2px #dd1931;
}

.mixitup-control-active[data-filter]:after {
    background: transparent;
}

.control[data-filter] + .control[data-sort] {
    margin-left: .75rem;
}

.control[data-filter=".green"] {
    color: #91e6c7;
}

.control[data-filter=".blue"] {
    color: #5ecdde;
}

.control[data-filter=".pink"] {
    color: #d595aa;
}

.control[data-filter="none"] {
    color: #2f2f2f;
}

/* Container
---------------------------------------------------------------------- */

.container {
    text-align: left;
    font-size: 14px;
	display: inline-block;
	width: 90%;
	vertical-align:top;
}

.container:after {
    content: '';
    display: inline-block;
    width: 100%;
}

/* Target Elements
---------------------------------------------------------------------- */

.mix,
.gap {
    display: inline-block;
    vertical-align: top;
}

.mix {
    background: #fff;
    border-top: 0;
    border-radius: 0;
    margin-bottom: 1.4rem;
	margin-right: 1.3rem;
    position: relative;
	text-align:center;
	overflow:hidden;
}

.mix img {
	width:100%;
	margin-bottom:-4px;
	opacity: 1;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	border-radius: 0;
}

.mix:hover img {
	opacity:0;
}

.mix:hover span {
	opacity:1;
}

.mix span {
	display: block;
	position: absolute;
	top: 46%;
    left: 50%;
    transform: translateX(-50%);
	width: 80%;
    text-align: center;
	margin: auto;
	opacity:0;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

.mix:before {
    content: '';
    display: inline-block;
}

/* Grid Breakpoints
---------------------------------------------------------------------- */

/* 2 Columns */

/*.mix,
.gap {
    width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
}*/

/* 3 Columns */

@media (max-width: 900px) and (min-width: 0px) {
	
.left, .right2 {
    width: 100%;
    margin: 0;
}
	
	.photo-resp { display:none; }
	
	.right, .left2 {
    width: 88%;
    display: block;
    margin: auto;
}
	
	.team {
    width: 88% !important;
    margin: auto;
    display: block;
}
	
	.team {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}
	
	img.portrait {
	width: 60%;
    margin: auto;
    display: block;
	}
	}

@media (max-width: 1200px) and (min-width: 0px) {

.animatedModal {
    width: 95% !important;
    height: auto !important;
    margin-top: 3%;
		left:2.5% !important;
		margin-left:0 !important;
		top:0 !important;
}
	
	.picto {
    width: 60%;
	}
	
	.description, .imgprojet {
    display: block;
		width:100%;
		padding-bottom:40px;
}
	
	.description h5 {
   margin-top:10px;
}
	}

@media (max-width: 1500px) and (min-width: 1200px) {

.animatedModal {
    width: 85% !important;
	margin-left: -42.5%;
	}
}

@media screen and (min-width: 541px) and (max-width: 961px) {
    .mix,
    .gap {
        width: calc(100%/2 - (((2 - 1) * 1.87rem) / 2));
		margin-right:0.8rem;
		margin-bottom:0.8rem;
    }
	
	.container { width:71.5%; }

	.controls { width:27.5%; } 
	
	h2 { margin-right:200px;}
	
	[off-canvas] { padding-left: 1.1rem }
}

/* 4 Columns */

@media screen and (min-width: 961px) and (max-width: 1281px) {
    .mix,
    .gap {
        width: calc(100%/4 - (((4 - 1) * 1.87rem) / 4));
		margin-right:0.9rem;
		margin-bottom:0.9rem;
    }
	.container { width:75%; }

	.controls { width:25%; } 
	
	h2 { margin-right:200px;}
	
	[off-canvas] { padding-left: 1rem }
}

/* 5 Columns */

@media screen and (min-width: 1281px) {
    .mix,
    .gap {
        width: calc(100%/5 - (((5 - 1) * 1.87rem) / 5));
    }
}
	
	@media (max-width: 771px) and (min-width: 0px) {
img.photo-resp {
    display: none;
}
		
		.bouton {
    margin-left: auto;
    margin-right: auto;
}
}

@media (max-width: 700px) and (min-width: 0px) {
.bloc-footer {
    width: 100% !important;
    border-right: 0 !important;
}
	}

@media (max-width: 771px) and (min-width: 0px) {
nav ul li {
    display: block;
    list-style-type: none;
    font-family: 'Avenir', sans-serif;
    font-size: 17px;
    letter-spacing: 2px;
    background-image: none;
    background-color: #21354F;
    height: 40px;
}
	
	nav ul li a {
	color:#FFF !important;
}
	}