@charset "UTF-8";
@font-face {
    font-family: 'eras bold';
    src: url('../fonts/LTe50238.woff') format('woff'), url('../fonts/LTe50238.otf') format('opentype');
}

@font-face {
    font-family: 'eras medium';
    
    src: url('../fonts/LTe50236.woff') format('woff'), url('../fonts/LTe50236.otf') format('opentype');
}

/* lobster-regular - latin */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  src: url('../fonts/lobster-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lobster Regular'), local('Lobster-Regular'),
       url('../fonts/lobster-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lobster-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lobster-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lobster-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lobster-v20-latin-regular.svg#Lobster') format('svg'); /* Legacy iOS */
}



html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

* {
    box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input,
button,
a {
    border: none;
    margin: 0;
    outline: none
}

button,
input:not([type=checkbox]):not([type=radio]),
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: inherit;
    resize: none;
    font: inherit;
    color: inherit
}

button,
input[type=submit] {
    border: none;
    padding: 0;
    margin: 0;
    background: lightgrey
}

button:hover,
input[type=submit] {
    cursor: pointer
}

img {
    display: block
}

strong {
    font-weight: normal
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    height: 0
}

@-webkit-keyframes scale-down {
    from {
        -webkit-transform: translate3d(0, 0, 300px)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0)
    }
}

@keyframes scale-down {
    from {
        -webkit-transform: translate3d(0, 0, 300px);
        transform: translate3d(0, 0, 300px)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

html {
    width: 100%;
    height: 100%;
    font-size: 62.5%
}

body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    font-family: "eras medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    color: #fff;
    counter-reset: section;
    background: #000
}

::-moz-selection {
    background: #eb0024;
    color: #fff
}

::selection {
    background: #eb0024;
    color: #fff !important;
}

::-moz-selection {
    background: #F24D18;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.select{
    -webkit-touch-callout: all;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

.resizing * {
    -webkit-transition: none !important;
    transition: none !important;
}

a {
    text-decoration: none;
    color: #fff !important;
}

.btn {
    overflow: hidden;
    display: inline-block;
    margin-top: 3rem;
    padding: 0 4rem 0 3.8rem;
    font-family: "eras medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 3rem;
    letter-spacing: .2rem;
    color: #fff;
    background: none;
    border: 3px solid #fff;
    cursor: pointer;
}

header .btn:after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: -1;
    height: 150%;
    background: #fff;
    pointer-events: none;
    -webkit-transform: translate3d(0, 85px, 0);
    -ms-transform: translate3d(0, 85px, 0);
    transform: translate3d(0, 85px, 0);
    -webkit-transition: all 0.3s 0s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: all 0.3s 0s cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

.prestations-visible header .btn:after {
    -webkit-transform: translate3d(0, 95px, 0);
    -ms-transform: translate3d(0, 95px, 0);
    transform: translate3d(0, 95px, 0);
}

.equipe-visible header .btn:after {
    -webkit-transform: translate3d(0, 95px, 0);
    -ms-transform: translate3d(0, 95px, 0);
    transform: translate3d(0, 95px, 0);
}

.philosophie-visible header .btn:after {
    -webkit-transform: translate3d(0, 95px, 0);
    -ms-transform: translate3d(0, 95px, 0);
    transform: translate3d(0, 95px, 0);
}

.konseptnu-visible header .btn:after {
    -webkit-transform: translate3d(0, 95px, 0);
    -ms-transform: translate3d(0, 95px, 0);
    transform: translate3d(0, 95px, 0);
}

.nosAmis-visible header .btn:after {
    -webkit-transform: translate3d(0, 95px, 0);
    -ms-transform: translate3d(0, 95px, 0);
    transform: translate3d(0, 95px, 0);
}

.contact-visible header .btn:after {
    -webkit-transform: translate3d(0, 95px, 0);
    -ms-transform: translate3d(0, 95px, 0);
    transform: translate3d(0, 95px, 0);
}

.btn:hover:after {
    -webkit-transform: translate3d(0, 0px, 0);
    -ms-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0)
}

.btn:hover i {
    color: #333332
}

.btn:active {
    color: #333332;
    background: #fff;
    -webkit-transition: none !important;
    transition: none !important
}

.btn i {
    display: inline-block;
    height: 100%;
    line-height: 4.5rem;
    -webkit-transition: all 0.3s cubic-bezier(0, 0.78, 0.22, 1);
    transition: all 0.3s cubic-bezier(0, 0.78, 0.22, 1)
}

.transitioning * {
    pointer-events: none !important
}

#bg-transitions {
    overflow: hidden;
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important
}

.bg-container {
    overflow: hidden;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: -100;
    width: 100%;
    height: 100%;
    -webkit-perspective: 1200px;
    perspective: 1200px;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.bg-container.current {
    z-index: -1
}

.bg-container.current.scaling .bg-slice {
    -webkit-animation: scale-down 1.3s ease-in-out forwards;
    animation: scale-down 1.3s ease-in-out forwards
}

.bg-container.current.triggered {
    z-index: 100 !important
}

.bg-slice {
    float: left;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.bg-image {
    overflow: hidden;
    position: relative;
    min-width: 100%;
    height: 100%
}

.bg-image img {
    display: block;
    position: absolute
}

#bg-fade {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: -10;
    background-size: auto 100% !important;
    background-position: left top !important;
    background: #000
}

.bg-container .bg-slice .bg-image img {
    min-width: 100vw;
    min-height: 100vh
}

#effet-1 .bg-slice {
    width: 100%;
    height: 100%;
    overflow: hidden
}

#effet-1 .bg-slice .bg-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000
}

#effet-1.triggered .bg-slice .bg-image {
    -webkit-transition: all 1.1s cubic-bezier(0.7, 0, 0.3, 1);
    transition: all 1.1s cubic-bezier(0.7, 0, 0.3, 1)
}

#effet-1.triggered .bg-slice:nth-child(1) .bg-image {
    -webkit-transform: translateY(-1110px);
    -ms-transform: translateY(-1110px);
    transform: translateY(-1110px)
}

#effet-2 .bg-slice {
    width: 20%;
    height: 100%;
    overflow: hidden
}

#effet-2 .bg-slice .bg-image {
    width: 100%;
    height: 100%
}

#effet-2 .bg-slice:nth-child(1) img {
    left: 0;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

#effet-2 .bg-slice:nth-child(2) img {
    left: -100%;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s
}

#effet-2 .bg-slice:nth-child(3) img {
    left: -200%;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s
}

#effet-2 .bg-slice:nth-child(4) img {
    left: -300%;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s
}

#effet-2 .bg-slice:nth-child(5) img {
    left: -400%;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

#effet-2.triggered img {
    -webkit-transition: all 0.8s ease-in;
    transition: all 0.8s ease-in;
    -webkit-transform: translateY(810px);
    -ms-transform: translateY(810px);
    transform: translateY(810px)
}

#effet-3 .bg-slice {
    width: 50%;
    height: 50%
}

#effet-3 .bg-slice .bg-image {
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.8s ease-in;
    transition: all 0.8s ease-in
}


/*
#effet-3 .bg-slice .bg-image img{
	min-width:200%;
	height:200%
}
*/

#effet-3 .bg-slice:nth-child(n+3) .bg-image {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s
}

#effet-3 .bg-slice:nth-child(1) img {
    left: 0
}

#effet-3 .bg-slice:nth-child(2) img {
    left: -100%
}

#effet-3 .bg-slice:nth-child(3) img {
    top: -100%
}

#effet-3 .bg-slice:nth-child(4) img {
    top: -100%;
    left: -100%
}

#effet-3.triggered .bg-slice img {
    -webkit-transition: all 0.8s ease-in;
    transition: all 0.8s ease-in
}

#effet-3.triggered .bg-slice:nth-child(odd) .bg-image {
    -webkit-transform: translateX(-810px);
    -ms-transform: translateX(-810px);
    transform: translateX(-810px)
}

#effet-3.triggered .bg-slice:nth-child(even) .bg-image {
    -webkit-transform: translateX(810px);
    -ms-transform: translateX(810px);
    transform: translateX(810px)
}

#effet-4 .bg-slice {
    width: 100%;
    height: 50%
}

#effet-4 .bg-slice .bg-image {
    width: 100%;
    height: 100%
}


/*
#effet-4 .bg-slice .bg-image img{
	min-width:100%;
	height:200%
}
*/

#effet-4 .bg-slice:nth-child(2) img {
    top: -100%
}

#effet-4.triggered .bg-slice .bg-image {
    -webkit-transition: all 1.2s ease-in;
    transition: all 1.2s ease-in
}

#effet-4.triggered .bg-slice:nth-child(1) .bg-image {
    -webkit-transform: translateX(-1610px);
    -ms-transform: translateX(-1610px);
    transform: translateX(-1610px)
}

#effet-4.triggered .bg-slice:nth-child(2) .bg-image {
    -webkit-transform: translateX(1610px);
    -ms-transform: translateX(1610px);
    transform: translateX(1610px)
}

#effet-5 .bg-slice {
    width: 33.333333%;
    height: 100%
}

#effet-5 .bg-slice .bg-image {
    width: 100%;
    height: 100%
}


/*
#effet-5 .bg-slice .bg-image img{
	min-width:300%;
	height:100%
}
*/

#effet-5 .bg-slice:nth-child(1) img {
    left: 0;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

#effet-5 .bg-slice:nth-child(2) img {
    left: -100%;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s
}

#effet-5 .bg-slice:nth-child(3) img {
    left: -200%;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

#effet-5.triggered .bg-slice .bg-image {
    -webkit-transition: all 1s ease-in;
    transition: all 1s ease-in
}

#effet-5.triggered .bg-slice:nth-child(1) .bg-image {
    -webkit-transform: translateX(-600px);
    -ms-transform: translateX(-600px);
    transform: translateX(-600px)
}

#effet-5.triggered .bg-slice:nth-child(2) .bg-image {
    -webkit-transform: translateY(810px);
    -ms-transform: translateY(810px);
    transform: translateY(810px)
}

#effet-5.triggered .bg-slice:nth-child(3) .bg-image {
    -webkit-transform: translateX(600px);
    -ms-transform: translateX(600px);
    transform: translateX(600px)
}

#effet-6 .bg-slice {
    width: 33.3333%;
    height: 33.33333%
}

#effet-6 .bg-slice .bg-image {
    width: 100%;
    height: 100%;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom
}


/*
#effet-6 .bg-slice .bg-image img{
	min-width:300%;
	height:300%
}
*/

#effet-6 .bg-slice:nth-child(2) img,
#effet-6 .bg-slice:nth-child(5) img,
#effet-6 .bg-slice:nth-child(8) img {
    left: -100%
}

#effet-6 .bg-slice:nth-child(3n) img {
    left: -200%
}

#effet-6 .bg-slice:nth-child(4) img,
#effet-6 .bg-slice:nth-child(5) img,
#effet-6 .bg-slice:nth-child(6) img {
    top: -100%
}

#effet-6 .bg-slice:nth-child(n+7) img {
    top: -200%
}

#effet-6.triggered .bg-slice .bg-image {
    opacity: 0;
    -webkit-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

#effet-6.triggered .bg-slice:nth-child(2) .bg-image {
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

#effet-6.triggered .bg-slice:nth-child(1) .bg-image,
#effet-6.triggered .bg-slice:nth-child(3) .bg-image,
#effet-6.triggered .bg-slice:nth-child(5) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s
}

#effet-6.triggered .bg-slice:nth-child(4) .bg-image,
#effet-6.triggered .bg-slice:nth-child(6) .bg-image,
#effet-6.triggered .bg-slice:nth-child(8) .bg-image {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s
}

#effet-6.triggered .bg-slice:nth-child(7) .bg-image,
#effet-6.triggered .bg-slice:nth-child(9) .bg-image {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s
}

#effet-7 .bg-slice {
    width: 50%;
    height: 50%
}

#effet-7 .bg-slice .bg-image {
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.8s ease-in;
    transition: all 0.8s ease-in
}


/*
#effet-7 .bg-slice .bg-image img{
	min-width:200%;
	min-height:200%
}
*/

#effet-7 .bg-slice:nth-child(n+3) .bg-image {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s
}

#effet-7 .bg-slice:nth-child(1) img {
    left: 0
}

#effet-7 .bg-slice:nth-child(2) img {
    left: -100%
}

#effet-7 .bg-slice:nth-child(3) img {
    top: -100%
}

#effet-7 .bg-slice:nth-child(4) img {
    top: -100%;
    left: -100%
}

#effet-7.triggered .bg-slice img {
    -webkit-transition: all 0.8s ease-in;
    transition: all 0.8s ease-in
}

#effet-7.triggered .bg-slice:nth-child(odd) .bg-image {
    -webkit-transform: translateX(-810px);
    -ms-transform: translateX(-810px);
    transform: translateX(-810px)
}

#effet-7.triggered .bg-slice:nth-child(even) .bg-image {
    -webkit-transform: translateX(810px);
    -ms-transform: translateX(810px);
    transform: translateX(810px)
}

#effet-8 .bg-slice {
    width: 20%;
    height: 100%;
    overflow: hidden
}

#effet-8 .bg-slice .bg-image {
    width: 100%;
    height: 100%
}


/*
#effet-8 .bg-slice .bg-image img{
	min-width:100%;
	min-height:100%
}
*/

#effet-8 .bg-slice:nth-child(1) img {
    left: 0;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

#effet-8 .bg-slice:nth-child(2) img {
    left: -100%;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s
}

#effet-8 .bg-slice:nth-child(3) img {
    left: -200%;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s
}

#effet-8 .bg-slice:nth-child(4) img {
    left: -300%;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s
}

#effet-8 .bg-slice:nth-child(5) img {
    left: -400%;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

#effet-8.triggered img {
    -webkit-transition: all 0.8s ease-in;
    transition: all 0.8s ease-in;
    -webkit-transform: translateY(810px);
    -ms-transform: translateY(810px);
    transform: translateY(810px)
}

.valign-parent:before {
    content: '';
    display: inline-block;
    height: 100%;
    margin-left: -4px;
    vertical-align: middle
}

.valign-child {
    display: inline-block;
    position: relative;
    z-index: 10;
    vertical-align: middle
}

.prestations-visible .valign-child {
    opacity: 0
}

.equipe-visible .valign-child {
    opacity: 0
}

.philosophie-visible .valign-child {
    opacity: 0
}

.konseptnu-visible .valign-child {
    opacity: 0
}

.nosAmis-visible .valign-child {
    opacity: 0
}

.contact-visible .valign-child {
    opacity: 0
}

#container {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 10
}

#container #logoIconHide {
    position: absolute;
    top: 38px;
    left: 38px;
    -webkit-transition: all 0.6s linear;
    transition: all 0.6s linear;
}

#container #liLogoIcon {
    float: left;
    position: relative;
    width: 70px;
    height: 70px;
    z-index: 100000;
    overflow: hidden;
}

#container #liLogoIcon a {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}

#container #liLogoIcon .overlay-link {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 100;
    height: 100%;
    cursor: pointer
}

.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden
}

#logoIcon {
    width: 70px;
    height: 70px;
}

.picto-en,
.picto-fr,
.facebook,
.linkedin {
    position: absolute;
    z-index: 100000;
    opacity: .6;
    cursor: pointer;
    -webkit-transition: all 0.6s linear;
    transition: all 0.6s linear
}

.picto-en.hide,
.picto-fr.hide,
.facebook.hide,
.linkedin.hide {
    display: none;
}

.picto-fr,
.facebook {
    right: 88px;
}

.picto-en,
.linkedin {
    right: 38px;
}

.picto-fr,
.picto-en {
    top: 38px;
}

.facebook,
.linkedin {
    bottom: 138px;
}

.picto-en img,
.picto-fr img,
.facebook img,
.linkedin img {
    width: 40px;
    height: 40px;
}

.picto-en:hover,
.picto-fr:hover,
.facebook:hover,
.linkedin:hover {
    opacity: 1;
}

#hamburger {
    position: absolute;
    bottom: 28px;
    left: 50%;
    z-index: 1000;
    margin-left: -30px;
    text-align: center;
    font-family: "eras bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 2rem;
    cursor: pointer;
    -webkit-transition: opacity 0.3s 0.4s linear;
    transition: opacity 0.3s 0.4s linear
}

.menu #hamburger {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.2s 0s linear;
    transition: opacity 0.2s 0s linear
}

#hamburger p {
    margin: 0 0 3px 0;
    padding: 0 0 0 1px
}

#menu {
    position: absolute;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 10000;
    height: 10rem
}

#menu ul {
    height: 100%;
    background-image: -webkit-linear-gradient(bottom, #000 30%, rgba(0, 0, 0, 0) 100%);
    background-image: -webkit-linear-gradient(bottom, #000 30%, rgba(0, 0, 0, 0) 100%);
    background-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 100%);
    -webkit-transform: translate3d(0, 100px, 0);
    -ms-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
    -webkit-transition: all 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: all 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

.facebook,
.linkedin {
    -webkit-transform: translate3d(0, 100px, 0);
    -ms-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
    -webkit-transition: all 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: all 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.ie9 #menu ul {
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px)
}

.ie9 .facebook,
.ie9 .linkedin {
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px)
}

.menu #menu ul {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.menu .facebook,
.menu .linkedin {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.ie9 .menu #menu ul {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px)
}

.ie9 .menu .facebook,
.ie9 .menu .linkedin {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px)
}

#menu li {
    float: left;
    position: relative;
    width: 14.285714285%;
    height: 10rem
}

#menu li div {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: "Lobster", cursive, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 2.2rem;
    line-height: 0px;
    color: #fff;
    background-repeat: no-repeat !important;
    background-size: cover !important
}

#menu li div.current + span.overlay-link {
    background-color: rgba(0, 0, 0, 0.7);
}

#menu li div .menuBig {
    display: block;
}

#menu li div .menuSmall {
    display: none;
}

#menu li div h4 {
    font-family: "Lobster", cursive !important;
    padding-top: 9px;
    line-height: 20px;

}

#menu li div h4 .menuLeLa {
    font-family: "Lobster", cursive !important;
    font-size: 2.2rem;

}

#menu li div hr {
    font-size: 10px;
    height: 2rem;
    margin-top: 8px;
    margin-bottom: 0px;
    width: 150px;
}

#menu li div h5 {
    font-family: "eras medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
}

#menu li div span.menuSpan {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: -1;
    background-size: cover !important;
    -webkit-transform: translate3d(0, 0, 0) scale(1.2);
    -ms-transform: translate3d(0, 0, 0) scale(1.2);
    transform: translate3d(0, 0, 0) scale(1.2);
    -webkit-transition: all 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: all 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

.menu #menu li div span.menuSpan {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1)
}

#menu li div.hover span.menuSpan {
    -webkit-transform: translate3d(0, 0, 0) scale(1.2);
    -ms-transform: translate3d(0, 0, 0) scale(1.2);
    transform: translate3d(0, 0, 0) scale(1.2)
}

#menu li .overlay-link {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 100;
    height: 10rem;
    cursor: pointer
}

#menu div.leSalon span.menuSpan {
    background: url("../img/menuSmall/leSalon_small.jpg")
}

#menu div.laSalleManger span.menuSpan {
    background: url("../img/menuSmall/laSalleManger_small.jpg")
}

#menu div.laChambreOrange span.menuSpan {
    background: url("../img/menuSmall/laChambreOrange_small.jpg")
}

#menu div.laChambreViolette span.menuSpan {
    background: url("../img/menuSmall/laChambreViolette_small.jpg")
}

#menu div.laChambreVerte span.menuSpan {
    background: url("../img/menuSmall/laChambreVerte_small.jpg")
}

#menu div.leHall span.menuSpan {
    background: url("../img/menuSmall/leHall_small.jpg")
}

#menu div.laCuisine span.menuSpan {
    background: url("../img/menuSmall/laCuisine_small.jpg")
}

#menu-overlay {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    -webkit-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out
}

.menu #menu-overlay {
    opacity: 1;
    visibility: visible
}

section.tl {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: -2;
    background-size: cover !important;
    background-attachment: fixed !important;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.6s linear;
    transition: opacity 0.6s linear
}

section.tl.current {
    z-index: 100;
    opacity: 1;
    pointer-events: all
}

section.tl header {
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

#logo {
    width: 490px;
    height: 185px;
    border: none;
    padding: 0;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

#logoIntro {
    max-width: 430px;
    font-size: 36px;
}

#introVilles {
    color: rgb(77, 77, 77);
    letter-spacing: 4px;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.lela {
    font-size: 5.4rem;
    line-height: 6.5rem
}

.chapter-title {
    padding-left: .8rem;
    font-family: "eras medium", cursive, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 7.4rem;
    line-height: 4rem;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

hr {
    height: 3rem;
    overflow: hidden;
    border: none;
    color: #fff;
    font-size: 30px;
    width: 330px;
    margin-top: 15px;
    margin-bottom: 10px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

#laSalleManger hr {
    width: 570px;
}

#laChambreOrange hr {
    width: 600px;
}

#laChambreViolette hr {
    width: 600px;
}

#laChambreVerte hr {
    width: 600px;
}

#leHall hr {
    width: 500px;
}

#laCuisine hr {
    width: 400px;
}

.popups hr,
.creations-container hr {
    opacity: 1;
    height: 30px;
    margin-top: -15px;
    margin-bottom: 5px;
    width: 600px;
}

.creations-container hr {
    width: 630px;
}

.popups .hr2,
.creations-container .hr2 {
    margin-top: 20px;
    margin-bottom: 40px;
}

hr:after {
    font-family: "";
    content: ".................................................................................";
    letter-spacing: 4px;
}

.intro {
    font-family: "eras medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    top: 10px;
    max-width: 370px;
    margin: 0 auto 10px;
    font-size: 2.2rem;
    line-height: 1.2;
    color: rgb(255, 255, 255);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s
}

#prestations-container .intro {
    opacity: 1;
    max-width: 560px;
}

#equipe-container .intro {
    opacity: 1;
    max-width: 540px;
}

.creations-container .intro {
    opacity: 1;
    max-width: 640px;
}

.creations-container .introEN {
    max-width: 550px;
}

#philosophie-container .intro {
    opacity: 1;
    max-width: 480px;
}

#konseptnu-container .intro {
    opacity: 1;
    max-width: 540px;
}

#nosAmis-container .intro {
    opacity: 1;
    max-width: 500px;
}

#contact-container .intro {
    opacity: 1;
    max-width: 540px;
}

#laSalleManger .intro {
    max-width: 300px;
}

#laChambreOrange .intro {
    max-width: 440px;
}

#laChambreViolette .intro {
    max-width: 610px;
}

#laChambreVerte .intro {
    max-width: 540px;
}

#leHall .intro {
    max-width: 480px;
}

#laCuisine .intro {
    max-width: 250px;
}

#laCuisine .introEN {
    max-width: 400px;
}

section .chapter-title,
section hr,
section .intro,
section header .btn,
#logo {
    opacity: 0;
    -webkit-transform: translate3d(0, 15px, 0);
    -ms-transform: translate3d(0, 15px, 0);
    transform: translate3d(0, 15px, 0);
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out
}

.prestations-visible section .btn {
    opacity: 1;
    font-size: 2.5rem;
    border: none;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0px 30px;
    margin: 0;
}

section.current {
    z-index: 500;
    -webkit-transition: background 0.7s ease-in-out;
    transition: background 0.7s ease-in-out
}

section.current .chapter-title,
section.current hr,
section.current .intro,
section.current header .btn,
section.current #logo {
    opacity: 1;
    -webkit-transform: translate3d(0, 0px, 0);
    -ms-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0)
}

.slide-overlay {
    *zoom: 1;
    position: absolute;
    top: 100%;
    bottom: auto;
    width: 100%;
    height: 100%;
    z-index: 11000;
    background: #fff;
    opacity: 1;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1)
}

.slide-overlay:before,
.slide-overlay:after {
    content: " ";
    display: table
}

.slide-overlay:after {
    clear: both
}

.slide-overlay .creations-intro {
    max-width: 570px;
    margin: 60px auto 0;
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.5;
    color: #999
}

.centerCloseOverlay {
    width: 600px;
    margin: 0 auto;
}

.close-overlay {
    display: block;
    position: relative;
    z-index: 1000;
    width: 30px;
    height: 30px;
    margin: 0px;
    text-indent: 150%;
    white-space: nowrap;
    overflow: hidden;
    background: none;
    border: 2px solid rgba(0, 0, 0, 0.6);
    cursor: pointer;
    -webkit-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.sticky .close-overlay {
    border-color: #fff
}

.popups .close-overlay,
#creations-details .close-overlay {
    background: #000;
    border-color: #fff;
    opacity: 0.5;
    left: 560px;
}

#equipe.popups .close-overlay {
    top: 25px;
}

#equipe .close-overlay {}

#creations-details .close-overlay {}

.creations-details-header .close-overlay {
    background: #000;
    border-color: #fff;
}

.close-overlay:hover {
    background: #fff !important;
    border: 2px solid #000 !important
}

.close-overlay:hover span {
    background: #000 !important;
}

.close-overlay span {
    display: block;
    background: rgba(0, 0, 0, 0.7);
    -webkit-transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.ie .close-overlay span {
    -webkit-transform: rotate(45deg) translateZ(0);
    -ms-transform: rotate(45deg) translateZ(0);
    transform: rotate(45deg) translateZ(0)
}

.sticky .close-overlay span {
    background: #fff
}

.close-overlay span:nth-child(1) {
    position: absolute;
    top: 12px;
    left: 50%;
    width: 21px;
    height: 3px;
    margin-left: -10px;
    -webkit-transform: rotate(45deg) translateZ(0);
    -ms-transform: rotate(45deg) translateZ(0);
    transform: rotate(45deg) translateZ(0)
}

.close-overlay span:nth-child(2) {
    position: absolute;
    top: 3px;
    left: 50%;
    width: 3px;
    height: 20px;
    margin-left: -1px;
    -webkit-transform: rotate(45deg) translateZ(0);
    -ms-transform: rotate(45deg) translateZ(0);
    transform: rotate(45deg) translateZ(0)
}

.popups .close-overlay span,
.creations-details-header .close-overlay span {
    background: #fff
}

#creations-details .creations-details-header {
    overflow: hidden;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 80px;
    padding-top: 43px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out
}

#creations-details .creations-details-header:after {
    content: "";
    display: block;
    position: absolute;
    /*top: 0px;*/
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 85px;
    background: #000;
    -webkit-transform: translate3d(0, -85px, 0);
    -ms-transform: translate3d(0, -85px, 0);
    transform: translate3d(0, -85px, 0);
    -webkit-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1)
}

#creations-details .creations-details-header.sticky {
    padding-top: 25px
}

#creations-details .creations-details-header.sticky:after {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

#creations-details .creations-container {
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    padding-top: 100px;
    background-color: #000;
}

#creations-details .creations-container h2,
#creations-details .creations-container .intro {
    text-align: center;
}


/******* all Popups *******/

.popups {
    overflow-y: auto;
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 100000 !important;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) !important;
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) !important;
}

body.prestations-visible.contact-visible .popups {
    background: rgba(0, 0, 0, 0.90);
}

.popups .valign-child {
    opacity: 1;
}

.popups h2,
.creations-container h2 {
    font-size: 5.5rem;
    font-family: "eras bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.aLink {
    cursor: pointer;
}


/******* prestations *******/

.prestations-visible #prestations {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.prestations-visible #hamburger {
    opacity: 0;
}

#prestations-container {
    /*position:absolute;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	width:100%;
	height:100%;*/
    text-align: center;
    margin-top: 20px;
}

#prestations-liste {
    width: 360px;
    margin-left: auto;
    margin-right: auto;
}

#prestations-liste li {
    font-family: "eras bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 2.7rem;
    margin-bottom: 15px;
    position: relative
}

#prestations-liste li:last-child {
    margin-bottom: 30px;
}


/******* equipe *******/

.equipe-visible #equipe {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    background-color: #000;
}

.equipe-visible #hamburger {
    opacity: 0;
}

#equipe-container {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    margin-top: 70px;
}

#equipe-liste {
    padding: 0;
    width: 100%;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;

}

#equipe-liste li {
    font-family: "eras bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    width: 25%;
    height: 300px;
    float: left;
}

#equipe-liste li span,
#equipe-liste li div {
    position: absolute;
    width: 100%;
    height: 100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: all 0.7s cubic-bezier(0.2, 0.2, 0.8, 0.8);
    transition: all 0.7s cubic-bezier(0.2, 0.2, 0.8, 0.8);
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    color:#fff !important;
}

#equipe-liste li:last-child {
    margin-bottom: 0px;
    color:#fff !important; 
}

#equipe-liste .pictoLine {
    margin-top: 20px;
    margin-left: 23%;
    margin-right: auto;
    position: center !important;
}

#equipe-liste .pictoLine img {
    width: 30px;
    height: 45px;
    float: center;
}

#equipe-liste .pictoLine {
    width: 240px;
}

#equipe-liste .pictoLine li {
    height: 100%;
    width: 25px;
    float: left;
    margin-right: 20px;
    cursor: pointer;
    fill:#fff !important;

}

.change-my-color {
    fill: green !important;
}

#equipe-liste .pictoLine li.lastPicto {
    margin-right: 10px;
}

#equipe-liste > li .normal {
    opacity: 1;
}

#equipe-liste > li:hover .normal {
    opacity: 0;
}

#equipe-liste > li .fun {
    opacity: 0;
}

#equipe-liste > li:hover .fun {
    opacity: 1;
}

#equipe-liste #keko .normal {
    background: url("../img/equipe/keko.jpg");
}
#equipe-liste #keko .fun {
    background: url("../img/equipe/kekoFun.jpg");
}

#equipe-liste #robin .normal {
    background: url("../img/equipe/robin.jpg");
}
#equipe-liste #robin .fun {
    background: url("../img/equipe/robinFun.jpg");
}

#equipe-liste #anthony .normal {
    background: url("../img/equipe/anthony.jpg");
}
#equipe-liste #anthony .fun {
    background: url("../img/equipe/anthonyFun.jpg");
}
#equipe-liste #taulant .normal {
    background: url("../img/equipe/taulant.jpg");
}
#equipe-liste #taulant .fun {
    background: url("../img/equipe/taulantFun.jpg");
}

#equipe-liste li div .equipeFond {
    background-color: rgba(77, 77, 77, 0.6);
}

#equipe-liste li div .equipeName {
    font-size: 2.7rem;
    margin-top: 50%;
}

#equipe-liste li div .equipeTitre {
    font-family: "eras medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: 60%;
    font-size: 2rem;
}

#equipe-liste li div hr {
    margin-top: 62%;
    width: 260px;
}


/******* philosophie ******/

.philosophie-visible #philosophie {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.philosophie-visible #hamburger {
    opacity: 0;
}

#philosophie-container {
    text-align: center;
    margin-top: 20px;
}

#philosophie-container #blocPhilo {
    width: 600px;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
}

#philosophie-container #blocPhilo div {
    font-family: "eras medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 50%;
    float: left;
    font-size: 1.9rem;
    padding: 0px 18px;
    line-height: 25px;
    -webkit-text-stroke: 0.3px;
}

#philosophie-container #blocPhiloEN div {
    font-family: "eras medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 50%;
    float: left;
    font-size: 1.9rem;
    padding: 0px 24px;
    line-height: 25px;
    -webkit-text-stroke: 0.3px;
}

#philosophie-container #blocPhilo span {
    font-family: "eras bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-text-stroke: 0px;
}

#philosophie-container #blocPhilo a#kofC {
    border-bottom: 1px dashed;
    cursor: pointer;
}


/******* konseptnu ******/

.konseptnu-visible #konseptnu {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.konseptnu-visible #hamburger {
    opacity: 0;
}

#konseptnu-container {
    /*position:absolute;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	width:100%;
	height:100%;*/
    text-align: center;
    margin-top: 20px;
}

#konseptnu-container div {
    width: 380px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

#konseptnu-container div p {
    font-size: 3.5rem;
    width: 100%;
    height: 100%;
    padding-top: 15px;
    font-family: "eras medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 3.8rem;
}

#konseptnu-container div p span {
    font-family: "eras bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

sup {
    vertical-align: super;
    font-size: 2rem;
}

#konseptnu-container #blocK2 {
    background-color: rgba(147, 32, 59, 0.4);
}

#konseptnu-container #blocCharity {
    background-color: rgba(0, 92, 44, 0.4);
}

#konseptnu-container #blocHuman {
    background-color: rgba(31, 73, 125, 0.4);
}


/******* nos amis ******/

.nosAmis-visible #nosAmis {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.nosAmis-visible #hamburger {
    opacity: 0;
}

#nosAmis-container {
    /*position:absolute;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	width:100%;
	height:100%;*/
    margin-top: 20px;
}

#nosAmis-container #logo-container {
    max-width: 600px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
}

#nosAmis-container #logo-container .aLink {
    margin-top: 25px;
    display: block;
}

#nosAmis-container #logo-container h3 {
    font-size: 3.2rem;
    margin-top: 40px;
    font-family: "eras bold", sans-serif;
}

#nosAmis-container #logo-container .nosAmis-wrapper {
    height: 100px;
    text-align: left;
}

#nosAmis-container #logo-container .nosAmis-wrapper .nosAmis-img-wrapper {
    width: 49%;
    height: 100%;
    background-color: #fff;
    padding: 10px;
    text-align: center;
    float: left;
}

#nosAmis-container #logo-container .nosAmis-wrapper .nosAmis-img-wrapper img {
    max-height: 100%;
    display: inline-block;
    max-width: 100%;
}

#nosAmis-container #logo-container .nosAmis-wrapper .nosAmis-info {
    width: 50%;
    padding: 0 10px;
/*    float: left;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}

#nosAmis-container #logo-container .nosAmis-wrapper .nosAmis-info .nosAmis-title {
    font-size: 2.5rem;
    display: block;
}

#nosAmis-container #logo-container .nosAmis-wrapper .nosAmis-info .nosAmis-description {
    font-size: 1.5rem;
}


/******* contact ******/

.contact-visible #contact {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.contact-visible #hamburger {
    opacity: 0;
}

#contact-container {
    /*position:absolute;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	width:100%;
	height:100%;*/
    text-align: center;
    margin-top: 20px;
}

#contact-container .intro2 {
    width: 440px;
    margin: 0 auto;
    font-family: "eras bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 1.3;
    height: 45px;
    margin-top: 30px;
}

#contact-container .intro2 #contact-adresse {
    display: block;
    /*float: left;*/
    /*width: 210px;*/
    width: 100%;
}

#contact-container .intro2 #contact-info {
    display: block;
    float: right;
    width: 200px;
}
/*
#contact-container .intro2 span:first-child {
   position: absolute;
    left: 50%;
    width: 2px;
    height: 135px;
    margin-top: 5px;
    background-color: #fff;
}
*/
#contact-container #picto-container {
    width: 175px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
}

#contact-container #picto-container.displayNone {
    display: none;
}

#contact-container #picto-container img {
    width: 45px;
    height: 45px;
}

#contact-container #picto-container div {
    float: left;
    margin-right: 20px;
    cursor: pointer;
}

#contact-container #picto-container div:last-child {
    margin-right: 0px;
}

#contact-container #picto-container .picto1 {
    display: block;
}

#contact-container #picto-container .picto1.displayNone {
    display: none;
}

/* Modif contact */
#contact-container #picto-container .picto10 {
    display: inherit;
}

#contact-container #picto-container .picto2 {
    display: none;
}

#contact-container #picto-container .picto2.displayBlock {
    display: block;
}

#contact-container #contact-form-container {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    font-size: 1.6rem;
    display: none;
}

#contact-container #contact-form-container #formActionCourriel {
    display: none;
}

#contact-container #contact-form-container #formActionCafe {
    display: none;
}

#contact-container #contact-form-container #formActionLunch {
    display: none;
}

#contact-container #contact-form-container.displayBlock {
    display: block;
}

#contact-container #contact-form-container #formActionCourriel.displayBlock {
    display: block;
    margin-bottom: 40px;
}

#contact-container #contact-form-container #formActionCafe.displayBlock {
    display: block;
    margin-bottom: 40px;
}

#contact-container #contact-form-container #formActionLunch.displayBlock {
    display: block;
    margin-bottom: 40px;
}

#contact-container #contact-form-container .introFormulaire {
    width: 500px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
    display: none;
    line-height: 1.3;
}

#contact-container #contact-form-container #introFormulaireCafe {
    width: 520px;
}

#contact-container #contact-form-container #introFormulaireCourriel.displayBlock,
#contact-container #contact-form-container #introFormulaireCafe.displayBlock,
#contact-container #contact-form-container #introFormulaireLunch.displayBlock {
    display: block;
}

#contact-container #contact-form-container input {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    height: 40px;
    margin-right: 10px;
    margin-bottom: 13px;
    padding: 10px;
    width: 290px;
}

#contact-container #contact-form-container input:nth-child(2),
#contact-container #contact-form-container input:nth-child(4),
#contact-container #contact-form-container input:nth-child(6),
#contact-container #contact-form-container input:nth-child(7) {
    margin-right: 0px;
}

#contact-container #contact-form-container input:nth-child(7) {
    margin-bottom: 0px;
    padding: 5px 0px;
    width: 80px;
    float: right;
}

#contact-container #contact-form-container::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #fff;
}

#contact-container #contact-form-container:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #fff;
    opacity: 1;
}

#contact-container #contact-form-container::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #fff;
    opacity: 1;
}

#contact-container #contact-form-container:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #fff;
}

#contact-container #merciFormulaire {
    display: none;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
    font-size: 1.6rem;
    line-height: 0;
}

#contact-container #merciFormulaire span {
    font-size: 2.2rem;
    margin-bottom: 40px;
    display: block;
}

#contact-container #merciFormulaire span#merciSpan2 {
    display: block;
    margin-top: 40px;
    margin-bottom: 25px;
}

#contact-container #merciFormulaire.displayBlock {
    display: block;
}

#contact-container #champsOblig {
    float: left;
    margin-top: -20px;
}

#contact-container #messageOffre {
    width: 595px;
    font-size: 16px;
    margin: 0 auto;
    line-height: 1.3;
}

#leSalon .btn,
#laSalleManger .btn,
#laChambreOrange .btn,
#laChambreViolette .btn,
#laChambreVerte .btn,
#leHall .btn,
#laCuisine .btn,
#erreur404 .btn {
    padding: 8px 0px 7px 0px;
    width: 310px;
}

#creations {
    *zoom: 1;
    position: relative;
    height: 100%;
    margin-top: 50px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: -webkit-transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 0.8s cubic-bezier(0.77, 0, 0.175, 1)
}

#creations:before,
#creations:after {
    content: " ";
    display: table
}

#creations:after {
    clear: both
}

.tile {
    overflow: hidden;
    float: left;
    position: relative;
    width: 33.333333%;
}

.tile:before {
    content: "";
    display: block;
    padding-top: 66.666666667%
}

.admin .tile {
    cursor: pointer
}

.tile article {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    text-align: center;
}

.tile:hover header {
    opacity: 1
}

.tile header {
    z-index: 1000;
    position: absolute;
    width: 100%;
    font-family: "eras medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
    opacity: 0;
    color: #fff;
    -webkit-transition: opacity 0.4s ease-in;
    transition: opacity 0.4s ease-in;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.tile header h5 {
    font-family: "eras bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 3.4rem;
    width: 100%;
}

li.tile:nth-child(12) {
    cursor: pointer;
}


/*
li.tile header .bci{
	line-height:1 !important;
	font-size:2.5rem;
	padding:40px 20px 0px;
}
*/


/*
li.tile header .sil, li.tile header .hallegeneve, li.tile header .hallefashion, li.tile header .hallecollecte, li.tile header .ssie, li.tile header .fvr, li.tile header .raifmont, li.tile header .fvbr, li.tile header .efy, li.tile header .raifmol, li.tile header .raifhaut{
	line-height:1 !important;
	padding:40px 20px 0px;
}
*/

li.tile header .alexis {
    font-size: 2.7rem;
}

li.tile header .vaucher,
li.tile header .emeraude,
li.tile header .celum,
li.tile header .coress,
li.tile header .metroavocats,
li.tile header .manorstyle {
    font-size: 3rem;
}

.tile header span {
    display: inline-block;
    font-size: 1.4rem;
}

.tile header span.creations-projet {
    font-size: 2.4rem;
    margin-bottom: 15px;
}

.img-container {
    overflow: hidden;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important
}

.img-container:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: rgb(77, 77, 77);
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in;
    transition: opacity 0.4s ease-in
}

.tile:hover .img-container:before {
    opacity: .8
}

.single-product .img-container:before {
    opacity: 1 !important
}

.creations-top .img-container {
    border: 6px solid #eb0024
}

.creations-top .img-container:after {
    content: "TOP";
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 68px;
    height: 68px;
    text-align: center;
    font-family: "eras medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.1rem;
    line-height: 11rem;
    letter-spacing: .2rem;
    background: #eb0024;
    -webkit-transform: translate3d(50%, -50%, 0) rotate(45deg);
    -ms-transform: translate3d(50%, -50%, 0) rotate(45deg);
    transform: translate3d(50%, -50%, 0) rotate(45deg)
}

#erreur404 {
    background: url(../img/backgrounds/Page404erreur.jpg) no-repeat center center fixed;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: cover;
}

#erreur404 hr {
    width: 300px;
}

.emploi-visible #emploi {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    background-color: rgba(0, 0, 0, 0.9);
}

.emploi {
    margin-top: 6em;
}

.btn-emploi {
    font-size: 2.2rem;
    border-width: 1px;
}

.annonce-container {
    max-width: 600px;
    font-size: 2em;
}

.annonce-container img {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 50px;
}

.annonce-container .annonce-description > div {
    margin-top: 15px;
}

.annonce-description {
    padding-bottom: 50px;
}

.annonce-container .w50 {
    display: inline-block;
    width: 50%;
    float: left;
    text-align: left;
    padding: 5px;
}

.annonce-container .w50 ul {
    padding: .5em 0;
    font-size: .8em;
}

.annonce-container .w50 ul li:before {
    content: '›';
    margin-right: .5em;
}

.annonce-container .w50 ul li {
    padding-left: 1em;
}

@media (max-width: 600px) {
    .annonce-container .w50 {
        width: 100%;
    }
}

.isotope-filters ul {
    max-width: 640px;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 2rem;
}
#toggle-mobile-filters,
.toggle-mobile-filters {
        display: none;
}

.filter {
    text-align: center;
    cursor: pointer;
    padding: 10px;
}

.filter img {
    margin: 0 auto 1em;
    height: 48px;
}
.icons-categories > span {
    margin-top: 10px;
    margin-left: 10px;
    width: 48px;
    height: 48px;
    background-size: contain;
}
.icons-categories > span:first-child {
    margin-left: 0;
}

.tile .icon-publi {
    background-image: url(../img/categories-creations/publi.png);
}
.tile .icon-digital {
    background-image: url(../img/categories-creations/digital.png);
}
.tile .icon-id {
    background-image: url(../img/categories-creations/id.png);
}
.tile .icon-event {
    background-image: url(../img/categories-creations/event.png);
}
.tile .icon-rp {
    background-image: url(../img/categories-creations/rp.png);
}

.img-framework{
    height: 100px;
}

#creations h5 {text-transform: lowercase;}
.filter, .NewFont, P
{
 
    font-size: 20px !important;
    font-family: 'eras medium';
    
    src: url('../fonts/LTe50236.woff') format('woff'), url('../fonts/LTe50236.otf') format('opentype');
    margin-top: 5px;

}
.panel-group + p
{
 
 width: 100% !important;
 height: auto !important;
}

.newButton1
{

    margin-left: 90% !important;
    margin-top:none !important;
    font-size: 2rem !important;
    border-radius: 0% ¨!important;


}
.newprase
{
    font-size: 15px !important;
    border-radius: 5px !important;
    background-color: #fff !important;
}


#equipe-liste li div .equipeFond {
    display: flex;
    flex-flow: column;
    justify-content: center;
}

#equipe-liste li div .equipeName {
    margin-top: 100px;
    position: static;
}

#equipe-liste li div .equipeTitre {
    margin-top: 0;
    position: static;
}

#equipe-liste li div hr {
    margin-top: 0;
}

#equipe-liste .pictoLine {
    width: 100% !important;
    margin-left: 0;
    display: flex;
    flex-flow: row;
    justify-content: center;
}