/* Welcome to Compass. In this file you should write your main styles. (or centralize your imports) Import this file using the following HTML or equivalent: <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
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, strong, 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: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

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

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

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

/*$color3: #de304a;*/
* { box-sizing: border-box; }

body { background: #fff; color: #333; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; font-style: normal; }

a { text-decoration: none; color: #da2448; }

a:active, a:hover { outline: 0; text-decoration: none; }

h1 { font-size: 3rem; color: #da2448; margin-bottom: 20px; }
h1:after { display: block; margin: 0 auto; padding-top: 20px; border-bottom: 3px solid #da2448; width: 50px; content: ''; display: block; }

h2 { font-size: 1.8rem; line-height: 32px; color: #464646; margin-bottom: 20px; text-transform: uppercase; }
h2:after { display: block; margin: 0 auto; padding-top: 20px; border-bottom: 3px solid #da2448; width: 50px; content: ''; display: block; }

h3 { font-size: 1.5rem; line-height: 28px; color: #464646; margin-bottom: 20px; text-transform: uppercase; }

h1, h2 { text-align: center; }

p { font-size: 1rem; margin-bottom: 15px; }

img { max-width: 100%; border: none; }

.container { width: 980px; margin: 0 auto; position: relative; }

ul { list-style: inside; }

li { margin-bottom: 10px; }

.loader { display: none; visibility: hidden; }

.load-position .logo { margin: 0 auto; }

.loader-actif { display: block; visibility: visible; position: fixed; overflow: hidden; background: #3d4045 url(../img/dark_embroidery.png); width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; z-index: 999999; }

.loader-actif .logo { color: #fff; text-align: center; display: block; margin-bottom: 20px; }

.loader-actif .load-position p { text-align: center; color: #fff; font-size: 12px; font-weight: 400; font-style: italic; }

.loader-actif .load-position { position: absolute; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; z-index: 999; right: 0; text-align: center; }
.loader-actif .load-position .loading { position: relative; margin: 20px auto; }
.loader-actif .load-position .spinner { width: 100px; height: 100px; position: relative; margin: 50px 0; display: inline-block; }
.loader-actif .load-position .spinner:after, .loader-actif .load-position .spinner:before { content: ""; display: block; width: 100px; height: 100px; border-radius: 50%; }
.loader-actif .load-position .spinner-1:before { position: absolute; top: -2px; left: -2px; border: 2px solid transparent; border-top-color: #da2448; border-bottom-color: #5E6973; -moz-animation: spin 1s linear infinite; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; }

@-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  50% { -moz-transform: rotate(180deg); transform: rotate(180deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } }
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes spin { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  50% { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
  100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
header { border-bottom: 1px solid rgba(255, 255, 255, 0.3); position: fixed; width: 100%; top: 0; left: 0; z-index: 10; }
header .container { /*@include flexbox();
flex-flow: row wrap;
align-items: center;
justify-content: space-between;*/ padding: 0; height: 100px; padding-top: 30px; -moz-transition-property: height; -o-transition-property: height; -webkit-transition-property: height; transition-property: height; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; }
header .container .logo, header .container nav { display: inline-block; }

.boutonMenu { position: absolute; display: none; top: -7px; left: 10px; height: 45px; width: 45px; cursor: pointer; /* replace text with background image */ overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; }
.boutonMenu span, .boutonMenu span::before, .boutonMenu span::after { /* hamburger icon in CSS */ position: absolute; width: 28px; height: 3px; background-color: #FFF; }
.boutonMenu span { /* this is the central line */ top: 21px; left: 8px; -moz-transition: all 0.2s 0.5s; -o-transition: all 0.2s 0.5s; -webkit-transition: all 0.2s; -webkit-transition-delay: 0.5s; transition: all 0.2s 0.5s; }
.boutonMenu span::before, .boutonMenu span:after { /* these are the upper and lower lines */ content: ''; left: 0; /*transition: all 0.2s $duration;*/ -moz-transition: all 0.2s 0.5s; -o-transition: all 0.2s 0.5s; -webkit-transition: all 0.2s; -webkit-transition-delay: 0.5s; transition: all 0.2s 0.5s; }
.boutonMenu span::before { bottom: 8px; }
.boutonMenu span::after { top: 8px; }

.nav-is-visible span { /* hide line in the center */ background-color: rgba(255, 255, 255, 0); }
.nav-is-visible span::before, .nav-is-visible span::after { /* keep visible other 2 lines */ background-color: white; }
.nav-is-visible span::before { -moz-transform: translateY(8px) rotate(-45deg); -ms-transform: translateY(8px) rotate(-45deg); -webkit-transform: translateY(8px) rotate(-45deg); transform: translateY(8px) rotate(-45deg); }
.nav-is-visible span::after { -moz-transform: translateY(-8px) rotate(45deg); -ms-transform: translateY(-8px) rotate(45deg); -webkit-transform: translateY(-8px) rotate(45deg); transform: translateY(-8px) rotate(45deg); }

.logo a { display: inline-block; font-size: 2.2rem; color: #fff; }
.logo a i { color: #da2448; font-weight: bold; margin-left: 20px; /*animation: animationScale 0.8s linear 10;*/ -moz-animation: animationScale 0.8s linear 10; -webkit-animation: animationScale 0.8s linear 10; animation: animationScale 0.8s linear 10; }

.header:hover i { -moz-animation: animationScale 0.8s linear infinite; -webkit-animation: animationScale 0.8s linear infinite; animation: animationScale 0.8s linear infinite; }

@-moz-keyframes animationScale { 0% { -moz-transform: scale(1, 1); transform: scale(1, 1); }
  50% { -moz-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); }
  100% { -moz-transform: scale(1, 1); transform: scale(1, 1); } }
@-webkit-keyframes animationScale { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  50% { -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); }
  100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@keyframes animationScale { 0% { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  50% { -moz-transform: scale(1.3, 1.3); -ms-transform: scale(1.3, 1.3); -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); }
  100% { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
.blocBoutonSearch { width: 5%; }

nav ul { width: 100%; /*display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: center;
align-items: center;*/ height: 60px; -moz-transition: height 0.5s; -o-transition: height 0.5s; -webkit-transition: height 0.5s; transition: height 0.5s; list-style: none; }
nav ul li { display: inline-block; padding: 0 13px; margin-bottom: 0; }
nav ul a { display: block; font-size: 1.1rem; color: #e8e7e7; line-height: 50px; -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; }
nav ul a:after { display: block; border-bottom: 3px solid transparent; width: 0; content: ''; display: block; -moz-transition: width 0.3s, border 0.3s; -o-transition: width 0.3s, border 0.3s; -webkit-transition: width 0.3s, border 0.3s; transition: width 0.3s, border 0.3s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
nav ul a:hover, nav ul a.active { color: #fff; }
nav ul a:hover:after, nav ul a.active:after { width: 100%; border-bottom: 3px solid #da2448; }

.cd-overlay { /* shadow layer visible when navigation is active */ position: fixed; overflow: hidden; z-index: 15; height: 100%; width: 100%; top: 0; left: 0; cursor: pointer; background-color: rgba(70, 70, 70, 0.8); visibility: hidden; opacity: 0; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s; -o-transition: opacity 0.3s 0s, visibility 0s 0.3s, -o-transform 0.3s 0s; -webkit-transition: opacity 0.3s, visibility 0s, -webkit-transform 0.3s; -webkit-transition-delay: 0s, 0.3s, 0s; transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s; }

.cd-overlay.is-visible { opacity: 1; visibility: visible; -moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s; -o-transition: opacity 0.3s 0s, visibility 0s 0s, -o-transform 0.3s 0s; -webkit-transition: opacity 0.3s, visibility 0s, -webkit-transform 0.3s; -webkit-transition-delay: 0s, 0s, 0s; transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s; }

header.fixed { position: fixed; background: #464646; background: rgba(70, 70, 70, 0.8); }
header.fixed .container { height: 60px; padding-top: 0; }
header.fixed nav ul { /*height: 30px;*/ }
header.fixed .cd-search-trigger { top: 5px; }
header.fixed .logo a { font-size: 1.3rem; padding: 3px 20px; }

section { padding: 60px 0 60px 0; background: #fff; }
section p:last-child { margin-bottom: 0; }

section.background { padding: 80px 0; background: #3d4045; color: #fff; background-image: url("../img/bg3.jpg"); background-attachment: fixed; background-size: cover; }
section.background h1, section.background h2 { color: #e8e7e7; text-shadow: 2px 0px 3px black; }

.slide-a h1, .slide-a p, .slide-b h2, .slide-b p, .slide-b.active h2, .slide-b.active p, .slide-c h2, .slide-c p { -moz-transition: all 1s cubic-bezier(1, -0.565, 0.075, 1.495); -o-transition: all 1s cubic-bezier(1, -0.565, 0.075, 1.495); -webkit-transition: all 1s cubic-bezier(1, -0.565, 0.075, 1.495); transition: all 1s cubic-bezier(1, -0.565, 0.075, 1.495); }

.slide-b, .slide-c, .slide-d, .slide-d h2, .slide-d p { -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }

@-moz-keyframes scrollDown { 0% { top: 14px; opacity: 0; }
  15% { top: 14px; opacity: 1; }
  30% { top: 14px; opacity: 1; }
  45% { top: 34px; opacity: 1; }
  100% { top: 34px; opacity: 0; } }
@-webkit-keyframes scrollDown { 0% { top: 14px; opacity: 0; }
  15% { top: 14px; opacity: 1; }
  30% { top: 14px; opacity: 1; }
  45% { top: 34px; opacity: 1; }
  100% { top: 34px; opacity: 0; } }
@keyframes scrollDown { 0% { top: 14px; opacity: 0; }
  15% { top: 14px; opacity: 1; }
  30% { top: 14px; opacity: 1; }
  45% { top: 34px; opacity: 1; }
  100% { top: 34px; opacity: 0; } }
.scroll-down { position: absolute; top: 50%; bottom: -44px; left: 50%; display: inline-block; width: auto; margin: 0 auto; text-align: center; background-color: transparent; border: none; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.scroll-mouse { position: relative; display: inline-block; width: 34px; height: 54px; margin: 0 auto; border: 2px solid #fff; border-radius: 20px; }
.scroll-wheel { position: absolute; top: 14px; left: 13px; width: 4px; height: 4px; background-color: #fff; border-radius: 50%; -moz-animation: scrollDown 2.5s infinite; -webkit-animation: scrollDown 2.5s infinite; animation: scrollDown 2.5s infinite; }

.intro { height: 100vh; position: relative; transition: all 2s; }
.intro .scrollBottom { z-index: 10; position: absolute; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 80%; }
.intro .container { top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; padding: 0; }
.intro h1 { font-size: 4rem; line-height: 4rem; margin-bottom: 80px; }
.intro h2 { font-size: 3rem; line-height: 3rem; margin-bottom: 50px; }
.intro p { font-size: 2rem; line-height: 2.2rem; margin-bottom: 30px; }

.intro.hidden { display: none; }

.slide { width: 100%; height: 100%; position: absolute; top: 0; left: 0; -moz-transform-origin: top left 50%; -ms-transform-origin: top left 50%; -webkit-transform-origin: top left 50%; transform-origin: top left 50%; padding: 20px; /*background: url(../img/dark_embroidery.png);*/ background: url(../img/bg.jpg); background-attachment: fixed; background-size: cover; }

.slide { z-index: 1; opacity: 0; }

.active { z-index: 5; opacity: 1; }

.slide-a { opacity: 1; }
.slide-a h1, .slide-a p { -moz-transform: translateX(-150%); -ms-transform: translateX(-150%); -webkit-transform: translateX(-150%); transform: translateX(-150%); }

.slide-a.active h1, .slide-a.active p { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }

.slide-b h2 { opacity: 0; -moz-transform: translateY(-200px); -ms-transform: translateY(-200px); -webkit-transform: translateY(-200px); transform: translateY(-200px); }
.slide-b p { opacity: 0; -moz-transform: translateY(200px); -ms-transform: translateY(200px); -webkit-transform: translateY(200px); transform: translateY(200px); }

.slide-b.active h2 { opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
.slide-b.active p { opacity: 1; transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }

.slide-c h2, .slide-c p { opacity: 0; -moz-transform: scale(0.4, 0.4); -ms-transform: scale(0.4, 0.4); -webkit-transform: scale(0.4, 0.4); transform: scale(0.4, 0.4); }
.slide-c p { display: inline-block; }
.slide-c p::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin: 0 10px; }
.slide-c p:last-of-type::after { display: none; }

.slide-c.active h2, .slide-c.active p { opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
.slide-c.active p { -moz-transition-delay: 100; -o-transition-delay: 100; -webkit-transition-delay: 100; transition-delay: 100; }

.slide-d h2, .slide-d p { opacity: 0; }
.slide-d p { display: inline-block; }

.slide-d.active h2, .slide-d.active p { opacity: 1; }

.news { background: #f1f0f7; }

.boxContainer { /*@include flexbox();
flex-flow: row wrap;
align-items: stretch;
justify-content: space-between;
justify-content: flex-start;*/ padding: 0; position: relative; }

.box { width: 30%; height: 200px; background: #383F51; margin-bottom: 20px; text-align: center; color: #fff; margin-right: 3%; display: inline-block; }

.box i { font-size: 3rem; display: block; text-align: center; color: #fff; -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; width: 90px; height: 90px; line-height: 90px; margin: 0 auto 20px auto; }

.box:hover i { -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }

#about .content { margin: 0 auto; width: 70%; text-align: justify; }

#competences .boxContainer { -moz-perspective: 1000px; -webkit-perspective: 1000px; perspective: 1000px; }
#competences .box { padding: 0; background: none; }
#competences .contentBox { position: relative; transition: 0.6s; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; height: 100%; }
#competences .box:hover .contentBox { -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
#competences .back, #competences .front { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; padding: 15px; }
#competences .front { z-index: 2; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); background: #3d4045; }
#competences .back { -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); background: #da2448; }

.page { background: #fff; position: relative; z-index: 2; margin-bottom: 115px; overflow: hidden; }

.animateblock { -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; opacity: 0; }

.animateblock.animated { opacity: 1; }

/* animation transition styles */
.animateblock.transformLeft { -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); }

.animateblock.transformLeft.animated { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }

.animateblock.transformRight { -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); }

.animateblock.transformRight.animated { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }

.animateblock.scale { -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); }

.animateblock.scale.animated { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }

.animateblock.transformTop { -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); }

.animateblock.transformTop.animated { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }

.animateblock.transformBottom { -moz-transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); }

.animateblock.transformBottom.animated { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }

.logo-php { background-image: url(../img/php.png); background-size: 100%; background-repeat: no-repeat; }

.logo-js { width: 60px !important; height: 60px !important; margin-bottom: 30px !important; margin-top: 20px !important; background-image: url(../img/js.png); background-size: 100%; background-repeat: no-repeat; }

#blocRef .owl-stage-outer { padding: 30px 0; }

blockquote { position: relative; padding-left: 50px; }
blockquote:before { content: "\201C"; font-family: Georgia, serif; position: absolute; font-size: 5rem; left: 0; top: 5px; }

#carousel li { list-style: none; }

.owl-dots { text-align: center; }
.owl-dots .owl-dot { display: inline-block; }
.owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: #D6D6D6; display: block; -webkit-backface-visibility: visible; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; border-radius: 30px; }
.owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span { background: #3d4045; }

.active span { background: #3d4045; }

.timeline { position: relative; padding: 2em 0; margin-top: 2em; margin-bottom: 2em; }
.timeline::before { /* this is the vertical line */ content: ''; position: absolute; top: 0; left: 18px; height: 100%; width: 4px; background: #e9e9e9; }
@media only screen and (min-width: 1210px) { .timeline { margin-top: 3em; margin-bottom: 3em; }
  .timeline::before { left: 50%; margin-left: -2px; } }

.timeline-block { position: relative; margin: 2em 0; clear: both; }
.timeline-block:first-child { margin-top: 0; }
.timeline-block:last-child { margin-bottom: 0; }
@media only screen and (min-width: 1210px) { .timeline-block { margin: 4em 0; }
  .timeline-block:first-child { margin-top: 0; }
  .timeline-block:last-child { margin-bottom: 0; } }

.timeline-img { position: absolute; top: 5px; left: 0; width: 40px; height: 40px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 0 0 0 4px #f6f6f6, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 0 0 4px #f6f6f6, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); box-shadow: 0 0 0 4px #f6f6f6, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); /*box-shadow: 0 0 0 4px #f6f6f6, inset 0 2px 0 rgba(#000, .08), 0 3px 0 4px rgba(#000, .05) ;*/ }
.timeline-img img { display: block; width: 24px; height: 24px; position: relative; left: 50%; top: 50%; margin-left: -12px; margin-top: -12px; }
.timeline-img.timeline-img { background: #da2448; }
@media only screen and (min-width: 1210px) { .timeline-img { width: 60px; height: 60px; left: 50%; margin-left: -30px; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } }

.timeline-content { position: relative; margin-left: 60px; background: #f6f6f6; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 20px; -moz-box-shadow: 0 3px 0 #e9e9e9; -webkit-box-shadow: 0 3px 0 #e9e9e9; box-shadow: 0 3px 0 #e9e9e9; margin-bottom: 40px; }
.timeline-content h3 { color: #2d313f; }
.timeline-content .timeline-date { display: inline-block; padding: .8em 0; opacity: .7; }
.timeline-content p { margin: 1em 0; line-height: 1.6; }
.timeline-content::before { content: ''; position: absolute; top: 16px; right: 100%; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #f6f6f6; }
@media only screen and (min-width: 1210px) { .timeline-content { margin-left: 0; padding: 1.6em; width: 45%; }
  .timeline-content::before { top: 24px; left: 100%; border-color: transparent; border-left-color: #f6f6f6; }
  .timeline-content .timeline-date { position: absolute; width: 100%; left: 122%; top: 6px; }
  .timeline-block:nth-child(even) .timeline-content { float: right; }
  .timeline-block:nth-child(even) .timeline-content::before { top: 24px; left: auto; right: 100%; border-color: transparent; border-right-color: #f6f6f6; }
  .timeline-block:nth-child(even) .timeline-content .timeline-date { left: auto; right: 122%; text-align: right; } }

.portfolios .categPortfolios { margin-bottom: 48px; padding-left: 0; text-align: center; }

.portfolios .categPortfolios li { display: inline-block; /*margin: 0 49px; */ width: 18%; position: relative; }

.portfolios .categPortfolios li:before { position: absolute; border: 1px solid #464646; height: 0; width: 100%; content: ""; top: 35%; left: 100px; z-index: 1; }

.portfolios .categPortfolios li:last-child:before { display: none; }

.portfolios .categPortfolios li a { color: #464646; font-size: 16px; text-transform: lowercase; font-weight: bold; text-align: center; display: block; }

.portfolios .categPortfolios li a i { position: relative; width: 100px; height: 100px; display: block; margin: 0 auto; border-radius: 50%; border: 1px solid #464646; font-size: 30px; line-height: 100px; color: #464646; margin-bottom: 20px; background: #fff; z-index: 5; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }

.portfolios .categPortfolios li:hover a > i, .portfolios .categPortfolios li a.active > i { background-color: #464646; color: #da2448; color: #fff; }

.portfolios .categPortfolios li:hover a { text-decoration: none; }

.portfolios .active span { background: #fff; }

/*** nEW ***/
#portfolioItems { list-style: none; padding: 20px 0; margin: 0 auto; text-align: center; width: 100%; }
#portfolioItems .itemPortfolio { display: inline-block; margin: 10px 5px 0 5px; vertical-align: top; height: 250px; }
#portfolioItems .itemPortfolio img { width: 350px; height: 250px; padding: 2px; border: 1px solid #ccc; }
#portfolioItems .hidden { visibility: hidden; display: none; }
#portfolioItems .visible { visibility: visible; display: inline-block; }

#portfolioItems .itemPortfolio > a, #portfolioItems .itemPortfolio > a img { outline: none; display: block; position: relative; }

/*** FIN NEW ****/
.og-expanded > a::after { top: auto; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #f6f6f6; border-width: 15px; left: 50%; margin: -20px 0 0 -15px; }

.og-expander { position: absolute; background: #f6f6f6; top: auto; left: 0; width: 100%; margin-top: 10px; text-align: left; height: 0; -moz-transition: height 0.3s; -o-transition: height 0.3s; -webkit-transition: height 0.3s; transition: height 0.3s; overflow: hidden; }

.details { display: none; }

.og-expander-inner { padding: 60px 20px 0 20px; height: 100%; }

.og-close { position: absolute; width: 40px; height: 40px; top: 20px; right: 20px; cursor: pointer; z-index: 100; }

.og-close::before, .og-close::after { content: ''; position: absolute; width: 100%; top: 50%; height: 1px; background: #888; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.og-close::after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.og-close:hover::before, .og-close:hover::after { background: #333; }

.og-fullimg, .og-details { width: 50%; float: left; height: 100%; overflow: hidden; position: relative; }

.og-details { padding: 0 40px 0 20px; }

.og-fullimg { text-align: center; }

.og-fullimg img { display: inline-block; max-height: 100%; max-width: 100%; }

.og-details h3 { padding: 0; margin-bottom: 10px; }

.og-details a { color: #da2448; text-transform: uppercase; letter-spacing: 2px; padding: 10px 20px; border: 3px solid #da2448; display: inline-block; margin: 30px 0 0; outline: none; }

.og-details a:hover { border-color: #464646; }

.og-loading { width: 20px; height: 20px; border-radius: 50%; background: #ddd; -moz-box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc; -webkit-box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; -moz-animation: loader 0.5s infinite ease-in-out both; -webkit-animation: loader 0.5s infinite ease-in-out both; animation: loader 0.5s infinite ease-in-out both; }

@-moz-keyframes loader { 0% { background: #ddd; }
  33% { background: #ccc; -moz-box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
  66% { background: #ccc; -moz-box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; } }
@-webkit-keyframes loader { 0% { background: #ddd; }
  33% { background: #ccc; -webkit-box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
  66% { background: #ccc; -webkit-box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; } }
@keyframes loader { 0% { background: #ddd; }
  33% { background: #ccc; -moz-box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; -webkit-box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
  66% { background: #ccc; -moz-box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; -webkit-box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; } }
@media screen and (max-width: 650px) { .og-fullimg { display: none; }
  .og-details { float: none; width: 100%; } }
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #999999; }

::-moz-placeholder { /* Firefox 19+ */ color: #999999; }

:-ms-input-placeholder { /* IE 10+ */ color: #999999; }

:-moz-placeholder { /* Firefox 18- */ color: #999999; }

input[type="text"], input[type="date"], input[type="datetime"], input[type="number"], input[type="search"], input[type="time"], input[type="url"], input[type="email"], textarea, select { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #BEBEBE; width: 100%; padding: 10px 20px; margin: 0px; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; outline: none; font-size: 0.8rem; }

input[type="text"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="email"]:focus, textarea:focus, select:focus { -moz-box-shadow: 0 0 8px #BEBEBE; -webkit-box-shadow: 0 0 8px #BEBEBE; box-shadow: 0 0 8px #BEBEBE; border: 1px solid #BEBEBE; }

textarea { height: 200px; }

.contact form { padding: 40px 20%; border: 1px solid #f1f0f7; border-radius: 8px; background: #f6f6f6; -moz-box-shadow: 0 3px 0 #e9e9e9; -webkit-box-shadow: 0 3px 0 #e9e9e9; box-shadow: 0 3px 0 #e9e9e9; }
.contact form #fields { 	/*display: table;
	@include flexbox(); flex-flow: row wrap; align-items: center; justify-content: space-between;*/ overflow: hidden; }
.contact form #fields p { width: 48%; float: left; }
.contact form #fields p:not(:nth-child(2n+0)):not(:last-child) { margin-right: 2%; }
.contact form #fields .g-recaptcha { clear: both; }
.contact form #fields label { display: block; margin-bottom: 10px; }
.contact form #fields .message, .contact form #fields .submit { width: 100%; }
.contact form #fields .submit { text-align: center; margin-top: 15px; }

.bouton { font-size: 1.1rem; border: none; cursor: pointer; padding: 15px 80px; display: inline-block; margin: 15px 30px; letter-spacing: 1px; font-weight: 700; outline: none; position: relative; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; color: #da2448; background: #fff; border: 1px solid #da2448; /*background: $color2Dark;*/ }
.bouton span { position: relative; z-index: 2; }
.bouton:after { content: ''; position: absolute; z-index: 1; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; /*width: 0%;
height: 100%;*/ width: 100%; height: 0; top: 0; left: 0; background: #da2448; }

.bouton:hover, .bouton:active { color: #fff; }

.bouton:hover:after, .bouton:active:after { /*width: 100%;*/ height: 100%; }

#additionCaptcha { display: block; border: 1px solid #ccc; padding: 20px; margin-bottom: 20px; background: #fff; }

#formContact .error_message { border: 1px solid #da2448; padding: 15px; margin-bottom: 20px; background: #fff7fb; }
#formContact .success_page { border: 1px solid #24da9c; padding: 15px; margin-bottom: 20px; background: #f9fff7; }

#cd-google-map { position: relative; }
#cd-google-map #google-container { height: 450px; }
#cd-google-map .address { position: absolute; width: 100%; bottom: 0; left: 0; padding: 1em 1em; background-color: rgba(61, 64, 69, 0.9); color: #ffffff; font-size: 1rem; }
#cd-google-map .address address { text-align: center; }

#cd-zoom-in, #cd-zoom-out { height: 32px; width: 32px; cursor: pointer; margin-left: 50px; background-color: rgba(61, 64, 69, 0.9); background-repeat: no-repeat; background-size: 32px 64px; background-image: url("../img/cd-icon-controller.svg"); }
.no-touch #cd-zoom-in:hover, .no-touch #cd-zoom-out:hover { background-color: #3d4045; }

#cd-zoom-in { background-position: 50% 0; margin-top: 50px; margin-bottom: 1px; }

#cd-zoom-out { background-position: 50% -32px; }

.footer { position: fixed; width: 100%; z-index: 1; background: #464646; bottom: 0; }
.footer .container { padding: 10px 0; }
.footer p { margin: 0; color: #fff; font-size: 0.8rem; }

.lienSociaux ul { width: 100%; /*display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: center;
align-items: stretch;*/ list-style: none; }
.lienSociaux li { display: inline-block; width: 25%; text-align: center; margin-bottom: 0; }
.lienSociaux a { color: #fff; display: block; width: 100%; padding: 10px 0; -moz-transition: background 0.5s; -o-transition: background 0.5s; -webkit-transition: background 0.5s; transition: background 0.5s; }
.lienSociaux i { font-size: 1.6rem; margin-right: 10px; -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; }
.lienSociaux li:hover i { -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }
.lienSociaux .fb a { background: rgba(58, 88, 155, 0.6); }
.lienSociaux .fb a:hover { background: #3a589b; }
.lienSociaux .twitter a { background: rgba(45, 170, 225, 0.6); }
.lienSociaux .twitter a:hover { background: #2daae1; }
.lienSociaux .google a { background: rgba(214, 73, 47, 0.6); }
.lienSociaux .google a:hover { background: #d6492f; }
.lienSociaux .linkedin a { background: rgba(0, 122, 185, 0.6); }
.lienSociaux .linkedin a:hover { background: #007ab9; }

#backToTop { position: fixed; right: 30px; bottom: 40px; z-index: 1000; display: none; }
#backToTop a { display: block; }
#backToTop i { display: block; width: 40px; height: 40px; line-height: 40px; font-size: 1.6rem; text-align: center; border-radius: 50%; background-color: #464646; color: #fff; -moz-animation: 1s ease-in 0s 3 linkTopAnim; -webkit-animation: 1s ease-in 0s 3 linkTopAnim; animation: 1s ease-in 0s 3 linkTopAnim; }

@-moz-keyframes linkTopAnim { 0% { -moz-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  15% { -moz-transform: translate(0px, -15px); transform: translate(0px, -15px); }
  30% { -moz-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  45% { -moz-transform: translate(0px, -10px); transform: translate(0px, -10px); }
  60% { -moz-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  75% { -moz-transform: translate(0px, -5px); transform: translate(0px, -5px); }
  100% { -moz-transform: translate(0px, 0px); transform: translate(0px, 0px); } }
@-webkit-keyframes linkTopAnim { 0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  15% { -webkit-transform: translate(0px, -15px); transform: translate(0px, -15px); }
  30% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  45% { -webkit-transform: translate(0px, -10px); transform: translate(0px, -10px); }
  60% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  75% { -webkit-transform: translate(0px, -5px); transform: translate(0px, -5px); }
  100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } }
@keyframes linkTopAnim { 0% { -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  15% { -moz-transform: translate(0px, -15px); -ms-transform: translate(0px, -15px); -webkit-transform: translate(0px, -15px); transform: translate(0px, -15px); }
  30% { -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  45% { -moz-transform: translate(0px, -10px); -ms-transform: translate(0px, -10px); -webkit-transform: translate(0px, -10px); transform: translate(0px, -10px); }
  60% { -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  75% { -moz-transform: translate(0px, -5px); -ms-transform: translate(0px, -5px); -webkit-transform: translate(0px, -5px); transform: translate(0px, -5px); }
  100% { -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } }
#blocCookie { position: fixed; bottom: 0; width: 100%; background: rgba(70, 70, 70, 0.9); z-index: 50; padding-top: 20px; color: #fff; }
#blocCookie #linkCookie { position: absolute; top: 0; right: 20px; width: 30px; height: 30px; display: block; }
#blocCookie #linkCookie i { font-size: 1.6rem; color: #fff; position: aboslute; top: 0; }
#blocCookie #linkCookie span { display: none; }
#blocCookie .messageCookie { font-size: 0.9rem; padding-right: 50px; text-align: center; }
#blocCookie .messageCookie a { font-weight: bold; color: #fff; }
#blocCookie .messageCookie a:hover { text-decoration: underline; }

#infoCookie { position: fixed; width: 600px; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 1px solid #f1f0f7; border-radius: 8px; background: #f6f6f6; -moz-box-shadow: 0 3px 0 #e9e9e9; -webkit-box-shadow: 0 3px 0 #e9e9e9; box-shadow: 0 3px 0 #e9e9e9; z-index: 100; padding: 20px; }
#infoCookie a:hover { text-decoration: underline; }
#infoCookie #linkClose { text-align: center; }

@media all and (max-width: 1024px) { .container { width: 90%; padding-top: 0 !important; }
  .logo, nav { width: 100%; text-align: center; }
  .logo { display: block !important; margin: 30px auto 0 auto; width: 50%; }
  .logo a { font-size: 2rem; padding: 0; }
  .box { width: 48%; margin-right: 1%; }
  .portfolios .box { width: 50%; }
  .boutonMenu { display: block; position: absolute; }
  header, header.fixed { /*height: 60px;*/ }
  header .container, header.fixed .container { height: 60px; overflow: none; width: 100%; }
  header .cd-search-trigger, header.fixed .cd-search-trigger { top: 20px; right: 10px; }
  header .logo a, header.fixed .logo a { font-size: 1.8rem; padding: 0; }
  header nav, header.fixed nav { display: block; }
  header nav ul, header.fixed nav ul { max-height: 0; height: auto; position: relative; -moz-transition: max-height 1s; -o-transition: max-height 1s; -webkit-transition: max-height 1s; transition: max-height 1s; overflow: hidden; display: block; margin-top: 30px; background: #464646; text-align: left; }
  header nav ul li, header.fixed nav ul li { border: 1px solid #ccc; display: block; }
  header nav.is-visible ul, header.fixed nav.is-visible ul { max-height: 400px; background: #464646; background-color: rgba(70, 70, 70, 0.9); }
  header nav.is-visible ul li:hover, header.fixed nav.is-visible ul li:hover { background-color: rgba(218, 36, 72, 0.5); }
  header nav ul a:after, header nav ul a:hover:after, header nav ul a.active:after, header.fixed nav ul a:after, header.fixed nav ul a:hover:after, header.fixed nav ul a.active:after { display: none; border-bottom: none !important; transition: none !important; }
  .contact form { padding: 40px 10%; }
  #infoCookie { width: 90%; overflow: scroll; height: 70%; } }
@media all and (max-width: 736px) { .box { width: 100%; margin-right: 0; }
  #about .content { margin: 0 auto; width: 100%; text-align: justify; }
  .animateblock.transformLeft { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
  .animateblock.transformRight { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
  .animateblock.scale { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  .animateblock.transformTop { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
  .animateblock.transformBottom { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
  .portfolios .box { width: 100%; }
  .contact form { padding: 40px 10%; }
  .contact form #fields p { width: 100%; }
  .contact form #fields .bouton { width: 100%; margin: 15px 0; }
  .portfolios .categPortfolios li a i { position: relative; width: 60px; height: 60px; line-height: 60px; }
  .portfolios .categPortfolios span { display: none; }
  .portfolios .categPortfolios li:before { display: none; }
  .page { margin-bottom: 0; }
  .footer { position: relative; }
  .intro h1 { font-size: 2.8rem; line-height: 2.8rem; margin-bottom: 20px; }
  .intro h2 { font-size: 2rem; line-height: 2rem; margin-bottom: 10px; }
  .intro p { font-size: 1.4rem; margin-bottom: 10px; } }
@media only screen and (min-device-width: 375px) and (max-device-width: 736px) and (orientation: landscape) { .intro h1 { font-size: 2.8rem; line-height: 2.8rem; margin-bottom: 20px; }
  .intro h2 { font-size: 2rem; line-height: 2rem; margin-bottom: 10px; }
  .intro p { font-size: 1.4rem; margin-bottom: 10px; } }