#projet { font-size: 0; padding: 0 65px; }
#projet p { font-family: 'DINPro-Regular'; font-weight: 100; font-size: 13px; color: #FFFFFF; text-align: center; padding: 55px 0; }
#projet ul { display: inline-block; width: 47%; vertical-align: top; }
#projet ul li { font-family: 'DINPro-Regular'; font-weight: 100; font-size: 13px; color: #FFFFFF; padding: 5px 0; }
#projet .spacer { display: inline-block; width: 6%; vertical-align: top; }

#realisations { text-align: center; background: #075CB3; }
#realisations #tags #filters .listTags fieldset button { width: 150px; opacity: .3; margin: 0 15px; border: none; background: none; outline: none; }
#realisations #tags #filters .listTags fieldset button.active, #realisations #tags #filters .listTags fieldset button:hover { opacity: 1; cursor: pointer; }
#realisations #tags #filters .listTags fieldset button span { display: block; width: 150px; }
#realisations #tags #filters .listTags fieldset button span svg { width: 80%; height: auto; fill: #FFFFFF; }
#realisations #tags #filters .listTags fieldset button strong { display: block; width: 125px; font-family: 'DINPro-Medium'; font-weight: 100; font-size: 13px; color: #FFFFFF; text-transform: uppercase; padding: 15px 0; margin: 0 auto; }
#realisations #tags #filters .listTags fieldset button.active strong { border-bottom: 2px solid #FFFFFF; }
#realisations #bulles { width: 720px; font-size: 0; margin: 0 auto 0 auto; padding-top: 100px; background: #075CB3; }
#realisations #bulles .mix { display: none; vertical-align: top; width: 25%; padding: 0 9px 80px 9px; }
#realisations #bulles .mix a { text-decoration: none; }
#realisations #bulles .mix a figure img { display: block; width: 162px; -webkit-border-radius: 100%; border-radius: 100%; margin: 0 auto; }
#realisations #bulles .mix.active a figure img { border: 5px solid #FFFFFF; }
#realisations #bulles .mix a figure figcaption { font-family: 'Einstellung-Regular'; font-weight: 100; font-size: 13px; color: #FFFFFF; text-decoration: none; padding-top: 10px; }
#realisations #bulles .mix a figure figcaption span { display: block; font-family: inherit; font-weight: 100; font-size: 12px; color: inherit; text-decoration: inherit; }

#images { padding: 25px 0 100px 0; background: #075CB3; }
#images .close { display: none; }
#images legend { font-family: 'Einstellung-Regular'; font-weight: 100; font-size: 18px; color: #FFFFFF; text-transform: uppercase; text-align: center; margin: 0 auto 10px auto; }
#images #realsSlider { width: 600px; margin: 0 auto; padding-bottom: 50px; }
#images #realsSlider .slide { background:  }
#images #realsSlider .slide span { display: block; font-family: 'DINPro-Regular'; font-weight: 100; font-size: 16px; text-transform: uppercase; color: #FFFFFF; text-align: center; margin: 0 auto 40px auto; }
#images #realsSlider .slide figure { padding-top: 77px; background: url(../images/template/sup-reals.png) no-repeat top center; }
#images #realsSlider .slide figure img { display: block; /*-webkit-border-radius: 100%; border-radius: 100%;*/ }

#images #realsSlider .owl-dots { position: absolute; bottom: 20px; left: 0; right: 0; dns height: 12px; text-align: center; }
#images #realsSlider .owl-dot { position: relative; display: inline-block; width: 12px; height: 12px; margin: 0 3px; }
#images #realsSlider .owl-dot:before { content: ''; position: absolute; top: 2px; left: 2px; bottom: 2px; right: 2px; opacity: .5; -webkit-border-radius: 8px; border-radius: 8px; background: #5CC4FF; }
#images #realsSlider .owl-dot.active:before { opacity: 1; }

#images #realsSlider .owl-prev, #images #realsSlider .owl-next { position: absolute; top: 55%; width: 44px; }
#images #realsSlider .owl-prev { left: -60px; }
#images #realsSlider .owl-next { right: -60px; }
#images #realsSlider .owl-prev svg, #images #realsSlider .owl-next svg { width: 100%; height: auto; fill: #FFFFFF; }


@media screen and (max-width: 800px) {
	#realisations #bulles .mix { width: 33.3333%; }
}


@media screen and (max-width: 668px) {
	#projet ul { width: 100%; }
	#projet ul li { line-height: 20px; }
	#projet .spacer { display: none; }
	#realisations #tags #filters .listTags fieldset button { width: 120px; }
	#realisations #tags #filters .listTags fieldset button span { width: 120px; }
	#realisations #bulles { width: 90%; }
	#realisations #bulles .mix { width: 33.333%; padding: 0 9px 30px 9px; }
	#realisations #bulles .mix a figure img { width: 100%; }
	#images { display: none; }
}


@media screen and (max-width: 420px) {
	#projet { padding: 0 30px; }
	#projet ul { width: 100%; }
	#projet ul li { line-height: 20px; }
	#projet .spacer { display: none; }
	#realisations #tags #filters .listTags fieldset button { width: 70px; }
	#realisations #tags #filters .listTags fieldset button span { width: 70px; }
	#realisations #tags #filters .listTags fieldset button strong { width: 65px; font-size: 12px; }
	#realisations #bulles { width: 90%; }
	#realisations #bulles .mix { width: 50%; padding: 0 9px 30px 9px; }
	#realisations #bulles .mix a figure img { width: 100%; }
	#images { display: none; }
	#images.open { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; padding-top: 48px; z-index: 100; }
	#images a.close { display: block; position: absolute; top: 68px; right: 10px; width: 32px; height: 32px; }
	#images a.close span { width: 32px; height: 32px; }
	#images a.close span svg { width: 32px; height: 32px; fill: #FFFFFF; }
	#images legend { padding: 30px 50px 0 50px; }
	#images #realsSlider { width: 90%; margin: 0 auto; }
	#images #realsSlider .slide figure img { width: 100%; }
	#images #realsSlider .owl-dots { display: block; }
}