@charset "utf-8";
*{padding:0; margin:0}
body{font:100%/1.4 Arial, Helvetica, sans-serif; position:relative; line-height:150%; margin: 0 auto; background:#fff; color:#404040;}
header, footer, section, nav, aside, article, address{display: block; border: 0 none; font-family: inherit;font-size: 100%; font-style: inherit;font-weight: inherit;margin: 0;padding: 0;vertical-align: baseline; position:relative}
header {position: fixed; top: 0; z-index: 3; width: 100%; background: rgb(255,255,255);}
section{padding: 3em 2%; font-family: 'raleway', Arial, Helvetica, sans-serif; overflow:hidden}
section#solution, section#expertises, section#events{padding: 0.2em 0 3em 0;}

#content #expertises .col4 p, .content #expertises .col4 p{text-align:left; font-size: 1em; line-height: 120%; color:#404040}
#content #expertises h3, .content #expertises h3{color:#404040}
#expertises a:link.plus, #expertises a:visited.plus, .eventHome span.plus{color:#404040; font-size:0.8em; text-transform:uppercase; font-style:italic; font-family: 'raleway', Arial, Helvetica, sans-serif; padding:0.2em 0 0.2em 2em; background:url(../images/icon-plus-grey.png) no-repeat; letter-spacing:0.1em; }
#expertises a:hover.plus, #expertises a:active.plus, #expertises a:focus.plus, #events span.plus:hover, .eventHome span.plus{-moz-transform: translateX(0.1em);-webkit-transform: translateX(0.1em);-opera-transform: translateX(0.1em);transform: translateX(0.1em);}
img {border:none; max-width:100%}
nav{width:83%; float:right}
.btn-mobile {display: none;}
.people{width:17%; float:left}
.people img {float: left; margin: 0.85em; animation: alpha ease-in 2s;}
iframe, embed {left: 0;top: 0;width: 100%;}
.player {position: relative;padding-bottom: 56.2%;padding-top: 0;height: 0;overflow: hidden;}
.player iframe, .player embed {width: 100%;height: 100%;visibility: visible;left: 0;top: 0;border: none;position: absolute;}
a:link, a:visited, a:active, a:focus {text-decoration:none;-moz-transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s; -opera-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s;}

a:link, a:visited{color:#594f50}
a:hover, a:active, a:focus {color:#00668e}
#content a:link, #content a:visited{color:#008000}
#content a:hover, #content a:active, #content a:focus {color:#00668e}
a:link.rose, a:visited.rose, #ensavoirplus a{color:#c10075}
a:hover.rose, a:active.rose, a:focus.rose , #ensavoirplus a:hover{color:#00668e}
.space a:link, .space a:visited, .space a:hover, .space a:active, .space a:focus {cursor: default;border-top: solid rgba(255,255,255,0) 0.2em !important;width: 2em;}

#content a:link.gris, #content a:visited.gris{color:#594f50}
#content a:hover.gris, #content a:active.gris, #content a:focus.gris {color:#00668e}
#content a:link., #content a:visited.blue{color:#2080c0}
#content a:hover.blue, #content a:active.blue, #content a:focus.blue {color:#8020c0}
.black hr{margin:0;}

h1, .h1{padding: 1em 1em 0.05em 1em; font-size: 3em; color:#ffffff; text-align:center; text-transform:uppercase; font-weight:normal; font-family: 'metanormal-roman', Arial, Helvetica, sans-serif; letter-spacing:0.1em; line-height: 100%;}
#ensavoirplus h1 {padding: 1em;font-size: 1.5em;color: #000000;text-align: center;text-transform: uppercase;font-weight: normal;font-family: 'raleway', Arial, Helvetica, sans-serif;letter-spacing: 0.1em;line-height: 100%;}
#owl-agency h1, #owl-agency p.h1 {padding: 12% 1em 0.05em 1em;}
#owl-agency hr{    border-bottom: solid 1px #fff; color: #fff; width:120px; margin: 1em auto 0.5em;}
.avant-titre{color:#ffffff; text-transform: uppercase; font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif; font-size: 1.8em; padding: 1em 1em 0;}
.titre{color:#ffffff; text-transform: uppercase; font-size: 2em; line-height: 120%; padding:0.3em 18% 0; letter-spacing:0.1em; font-family: 'cinzel', Arial, Helvetica, sans-serif;}
#content h1, .content h1, #creas h1{color:#2060a0; font-size: 2.7em; text-transform:none; letter-spacing:0; text-align:left; padding: 0.5em 0 1em 0; font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;}
#content p.h1, .content p.h1, #creas p.h1{color:#2060a0; font-size: 2.7em; text-transform:none; letter-spacing:0; text-align:left; padding: 0.5em 0 1em 0; font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;}
.h1{padding: 0.3em 1em 0.05em 1em; font-size: 2.3em;}
h1 span, .h1 span{font-weight:bold}
h2{padding: 0.7em 0; font-size: 1.8em; color:#c10075; text-align:center; text-transform:uppercase; font-weight:normal; font-family: 'raleway', Arial, Helvetica, sans-serif; letter-spacing:0.05em;}
h2.white, h2.white span{color:#ffffff}
h2 span{font-weight:bold; color:#594f50}
h2 img{margin:0.5em 0 0 0}
#content h2, .content h2{color:#404040; letter-spacing:0; font-family: 'cinzel', Arial, Helvetica, sans-serif; text-align:left; font-size: 1.45em;}
#content .prix h2, .content .prix h2{text-align:center}
h3{padding: 2em 0 0.4em 0; font-size: 1.2em; text-transform:uppercase; font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif; font-weight:normal; }
h3 span{color:#2060a0;text-transform: none;}
#content h3, .content h3{color: #2060a0;}
.eventHome {padding-top: 1%;}
.eventHome h3{padding: 0.1em 0px 0.4em;}
#openensavoirplus {cursor: pointer;}
#ensavoirplus {display: none;position: fixed;top: 10%;left: 0;right: 0;bottom: 20%;z-index: 9999;margin: 0 20%;background: #fff;padding: 1% 2% 2% 2%;-moz-box-shadow: 0px 0px 200px 0px #656565;-webkit-box-shadow: 0px 0px 200px 0px #656565;-o-box-shadow: 0px 0px 200px 0px #656565;box-shadow: 0px 0px 200px 0px #656565;filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=200);overflow-x: hidden;overflow-y: auto;}
#closensavoirplus{float: right;font-size: 2.5em;cursor: pointer;}

.black div.rh, .black div.b2b, .black div.autre{display: inline-block;}
h2.type{font-family:cinzel,times;color:#002080;padding: 2em 0 0.7em 0;background-color: #80e080;text-align: center;max-width:100%;}
div.black{background-color: #80e080;max-width:100%;}
a#closensavoirplus:hover, a#closensavoirplus:active, a#closensavoirplus:focus{color:#7C7D7E;}
.expert h3{padding-top:0.5em}
h4{padding: 1.125em 0 0 0; font-size: 1.125em;}
h5{padding: 1em 0 0 0; font-size: 1em;}
h6{padding: 0.875em 0 0 0; font-size: 0.875em;}
form{border: 0.08em solid #cccccc; padding: 1em; background:#fff}
p{padding:0.5em 0; font-family: 'raleway', Arial, Helvetica, sans-serif;letter-spacing:0.02em;}
ul li{list-style: none outside none;}
#content ul li, .content ul li{list-style-image: url("../images/checkmark.png"); margin: 0.2em 0 0 3em; font-size: 97%;}
hr {clear: both;background-color: #ffffff;background-color: rgba(255,255,255,0);width: 100%;border: 0;border-bottom: solid 1px #999999;color: #999999;margin: 2.9em auto 0.5em;height: 1px;}
#solution h2, #expertises h2{color:#404040; padding: 1.5em 0 1em;}
#expertises h3{padding:0}
#expertises hr{margin: 2em auto;}
#content #events h2, .content #events h2, #events h2{text-transform:none; color:#20a0ff; font-weight: bold;}
#content #events h3, .content #events h3, #events h3{color: #404040; padding: 0.5em 0 0 0; clear: both;}
#content #events h3 span {text-transform:initial;}
#events hr, #sync1-event hr{border-bottom: solid 1px #20a0ff; color: #20a0ff; margin: 0.5em auto 0; width:41px; float:left}
#events p{padding: 0.2em 0 0.5em}
a.event{cursor:pointer; margin:1em 0; display: block;}
#onglets_event a {border: solid 3px #f6f6f6;font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;text-transform: uppercase;text-align: center;display: block;padding: 0.5em 0.3em;cursor: pointer;font-size: 1.1em;line-height: 4em;}
#onglets_event a span {display: inline-block; line-height: 120%; vertical-align: middle;}
#onglets_event .currentItem a{ background-color: #F6F6F6; color: #C10075;}
a.connect{font-family: 'cinzel', Arial, Helvetica, cursive;text-color:#008000;font-size:1.3em; border:dotted 3px #737373; border-radius:0.3em; padding:0.7em 4em 0.7em 6em; background: url('../images/savoirplus.png') no-repeat 20% 50%; margin: 3em 0 2em; display: inline-block;}
a:hover.connect, a:active.connect, a:focus.connect{padding:0.7em 6em 0.7em 4em; background: url('../images/savoirplus.png') no-repeat 80% 50%;text-color:#008000;}
a.btnbase1 {font-family: "Open Sans Condensed",Arial,Helvetica,sans-serif;text-transform: uppercase;color: #737373;border: 2px solid #737373;border-radius: 0.3em;text-align:center;margin: 3em 0px 2em;display: inline-block;width: 40%;padding: 0.7em 4%;}
a:hover.btnbase1, a:active.btnBase1, a:focus.btnBase1{color:#B4AFAF;border-color:#B4AFAF;}
a.btnpink {font-family: "Open Sans Condensed",Arial,Helvetica,sans-serif;text-transform: uppercase;color: #c1047a;border: 2px solid #c1047a;border-radius: 0.3em;text-align:center;margin: 1em 0;display: inline-block;width: auto;padding: 0.7em 4%; font-size: 140%;}
a:hover.btnpink, a:active.btnpink, a:focus.btnpink{color:#00668e;border-color:#00668e;}
.btnPagination {color:#737373;display: inline-block; width: 30px;height: 30px;background-color: #FFFFFF; border-radius: 0.3em;border: 2px solid #737373;margin: 0 1em 1em 0;}
.currentPage {font-weight: 600; background-color: #E2E2E2;}
.galleryV2 img{margin: 0 1em 1em 0; vertical-align: middle; padding: 1em 3%;}
time{color:#20a0ff; font-size:120%; font-weight:bold; display: block;}
.col1 hr{border-bottom: solid 8px #008000; color: #008000}
.cote{background:#20a0ff; margin: 1.9em 0 0 0;}
.cote img{display:block}
blockquote{color:#2060a0; font-size: 1.5em; text-transform:none; letter-spacing:0; text-align:left; padding: 0.5em 0 1em 0; font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;}
blockquote hr{width:20%; color: #d0d0d0; border-bottom: 1px #d0d0d0 solid; margin: 0 0 0.7em;}
.center{text-align:center}
.clear{clear:both; line-height:0}
/*Le site est sur 12 colonnes*/
.col1{width:6.333333%; float:left; padding:0 1%;}
.col10{width:81.333333%; float:left; padding:0 1%}
div.galleryV2{float:inherit; margin: 0 auto;}
.col2{width:14.666666%; float:left; padding:0 1%}
.col3{width:21%; float:left; padding:1em 1.9%}
.col4{width:29.333333%; float:left; padding:1em 2%}
.col5{width:39.666666%; float:left; padding:0 1%}
.col6{width:46%; float:left; padding:0 2%; position:relative}
.col8{width:62.666666%; float:left; padding:1em 2%}
.col12{width:96%; float:left; padding:0 2%}
.expert .col12{padding:1em 2% 0}
a.technos, .technos{display:block; text-align:center; font-size:1.2em; text-transform:uppercase; font-family: 'cinzel', Arial, Helvetica, sans-serif;}
.technos p{text-transform:none; font-size: 85%; line-height: 120%; padding: 1.5em 0 1.5em;}
#solution .technos a.enSavoirPlusBtn{margin: 0 0 2em 0; display:inline-block; font-style:italic; color:#c1c1c1; border:solid 2px #c1c1c1; padding:1em; padding: 0.6em 1em; font-size: 75%; font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;}
#solution .technos a.enSavoirPlusBtn:hover{color:#404040; border:solid 2px #20a0ff;}
a.sous-technos{display:block; text-align:center;font-size:0.7em; line-height:120%; position:absolute; width:140px; height:140px}
a.sous-technos img{margin:0.5em 0 0; width:66%}
.technos .col6{padding-top:9em}
.ariane{background:#f5f5f5; font-size: 75%;}
.ariane a{padding: 0.4em 0; display:inline-block; font-style:italic}
#content .ariane, .content .ariane{font-size: 100%; text-transform:uppercase}
#content .ariane a, .content .ariane a{padding: 1em 0.5em;}
#content .ariane a.first, #content .ariane a.last, .content .ariane a.first, .content .ariane a.last{padding:1em 2em}
#com-interne{left:9%; top:52%}
#change{left:13%; top:16%}
#developpement-clients{left:8%; top:41%}
#conseils{left:23%; top:4%}
#digital{right:23%; top:4%}
#generation-leads{right:8%; top:41%}
#formation{left:23%; top:100%}
#evenements{right:23%; top:100%}
.hotnews{background: url('../images/bg-hotnews.jpg') no-repeat; background-size: 100% 100%; text-align:center; text-transform:uppercase; font-size:91%}
.hotnews img{margin:0 1em 0 0}
.hotnews a, .hotnews p{color:#ffffff; display:inline-block; padding:1.5em 1em 1.5em 5em; background:url('../images/icon-hotnews.png') no-repeat 1em 50%}
a.creas span.icon-lecture{position:absolute; width:100%; text-align:center; top: 5em; display:block}
h2.technos {text-transform:uppercase;}
a.creas{display:block; text-align:center; text-transform:uppercase; font-size:0.92em; font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif; letter-spacing:0; line-height: 100%;}
a.creas span{ text-transform:none; font-size:0.9em; padding: 0 0 1em 0; display: inline-block;}
.expert{color:#ffffff; background:#c7a39c url(../images/bg-expertises.jpg); background-size: 100% 100%}
.expert p{font-size:0.9em; line-height: 125%; padding: 0.5em 0 1em;}
a:link.plus, a:visited.plus{color:#ffffff; font-size:0.8em; text-transform:uppercase; font-style:italic; font-family: 'raleway', Arial, Helvetica, sans-serif; padding:0.2em 0 0.2em 2em; background:url(../images/icon-plus-home.png) no-repeat; letter-spacing:0.1em; }
a:hover.plus, a:active.plus, a:focus.plus {letter-spacing:0.2em;}
.max1400{max-width:1400px; margin:0 auto}
.max1200{max-width:1210px; margin:0 auto}
.max980{max-width:980px; margin:0 auto}
.grey{background:#f0f0f0;}
a:link.italic, a:visited.italic{display:block; color:#b7b7b7; text-align:center; text-transform:uppercase; font-style:italic; font-weight:bold; font-size:1.1em; letter-spacing:0.1em; padding: 2em 0 3em; font-family: 'raleway', Arial, Helvetica, sans-serif;}
a:hover.italic, a:active.italic, a:focus.italic {color:#c10075; letter-spacing:0.2em;}
#content .defaultStyle img{padding:1% 2% 0 1%;}
footer{background:#008000; padding: 0.5em 0 1.5em; color:#ffffff; font-size: 0.8em; line-height: 164%;}
footer a:link, footer a:visited{color:#ffffff}
footer a:hover, footer a:active, footer a:focus {color:#b4afaf;}
footer li a, footer li a:link, footer li a:visited{padding: 0.3em 0.7em;display: inline-block;}
footer .contact li a, footer .contact li a:link, footer .contact li a:visited {padding: 0;display: inline-block;}
footer .contact li{padding: 0.3em 0.7em;}
footer nav{width:100%; text-align:center; background:#fff; color:#6e6f70; font-size:91%}
footer nav a, footer nav a:link, footer nav a:visited{color:#6e6f70; text-transform:uppercase; padding:1em 0; display:inline-block}
footer nav a:hover, footer nav a:active, footer nav a:focus{color:#b4afaf;}
address{font-style:normal}
img.footer-rs{ margin:0 1em 0 0}
fieldset{border:none;}
legend{font-size:1.4em; color:#062033; font-weight:bold}
label{padding: 2em 0 0 0; display: inline-block; color:#5b646e; font-size: 0.9em;}
label:hover{color:#c10075;}
label.checkbox{padding: 0 0 0 1em; display: inline-block;}
input, textarea, select{width:98%; padding:0 1%; border-top:none; border-left:none; border-right:none; border-bottom:solid #cccccc 0.08em; font-family: 'raleway', Arial, Helvetica, sans-serif; color:#5b646e; outline: none;font-size: 0.9em;}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{ -webkit-box-shadow: 0 0 0px 1000px white inset;}
input:focus, textarea:focus{input:focus, textarea:focus,select:focus{  -webkit-box-shadow: 0px 0px 2px 2px #0080c0;box-shadow:  0px 0px 2px 2px #0080c0;}

input[type="submit"]{width:auto; float:right; background:url(../images/envoyer.png) no-repeat; background-position: 0.7em 50%; border:none; font-family: 'raleway', Arial, Helvetica, sans-serif; color:#5b646e; font-weight:bold; cursor:pointer; padding: 0.5em 1em 0.5em 2.5em; margin: 1.5em 0 0 0; border-radius: 0.5em; -moz-transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s; -opera-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; font-size:1.2em; -webkit-box-shadow:none;    border: 1px solid #ccc;}
input:hover[type="submit"]{color:#c10075;}
input[type="checkbox"], input[type="radio"] {width: auto;}
input[type="file"] {border: 0;color: #c10075;}
a.connect-rs{display:block; text-align:center; padding:0.2em 0}
a.fleche {display:inline-block}
a.fleche img{-moz-transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s; -opera-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s;}
a:hover.fleche img{margin:0 0 0 0.5em}
img.plan, #googlemap{margin: 3em 0 -3.4em 0;max-width: 281%; width:100%}
.bg-white{background:#ffffff; margin: 4% 4% 0;}
/*--------------------------------------------------------------------CSS Pages------------------------------------------------------------*/
section.top{padding: 4em 0 0; height: auto; text-shadow: 0 0 1em #594f50;}
#top{text-shadow: 0 0 1em #594f50; border-bottom: solid 4px #20a0ff; position:relative; overflow: visible;}
#top p{color:#ffffff; font-style: italic; font-size: 110%;}
#top hr{clear: both; background-color:#ffffff; background-color:rgba(255,255,255,0); color:#ffffff; width:8em; border: 0; border-bottom: 1px #ffffff solid; margin: 0.7em auto 0.5em; height: 1px;}
#top h1{font-size: 3.3em;}
#top img{position:absolute; bottom:-59px; left:50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -opera-transform: translateX(-50%); transform: translateX(-50%)}
#content .col4 p, .content .col4 p, .engagements p{color:#062033; font-size: 0.8em; line-height: 150%; text-align:justify}
.engagements strong{text-transform:uppercase; font-size: 1.2em; letter-spacing: 0.1em;}
#content .center p, .content .center p{text-align:center}
.adn, #content .adn p, .content .adn p{text-align:center; color:#594c4c;}
.adn strong{text-transform:uppercase; font-size:1.1em}
.adn img{margin: 0 0 0.6em 0}
.b2b{display:inline-block; padding:0.1em 0.6em; color:#fff; background:#dbdc4a; width: 2em; text-align: center;}
.rh{display:inline-block; padding:0.1em 0.6em; color:#fff; background:#20a0ff; width: 2em; text-align: center;}
.autre{padding:0.1em 0.6em;background:#6B8EFF;color:#FFFFFF;display:inline-block;text-align:center;}
.big{font-size:1.6em}
.reseaux{background:#c7a39c url(../images/bg-reseaux.jpg); background-size: 100% 100%}
.prix{background:#c7a39c url(../images/bg-prix.jpg); background-size: 100% auto}
.prix h2 span {color: #ffffff;}
.prix p{color: #ffffff; text-align:center; font-family: 'cinzel', Arial, Helvetica, sans-serif; font-size: 1.2em; padding:0.5em 1em; text-shadow: 0 0 1em #000000;}
.prix p img{margin:0 0.3em -0.2em}
.prix strong{text-transform:uppercase;font-size: 1.2em;letter-spacing: 0.1em;}
h2.technos{color: #594c4c; text-align: left; font-size: 1.2em; font-family: 'cinzel', Arial, Helvetica, sans-serif; font-weight: bold;padding: 0.1em 0;}
p.technos{color:#062033; font-size: 0.9em; line-height: 150%; text-align: justify;}
ul.menu-creas li{float:left; font-size:0.7em; text-transform:uppercase; font-family: 'brandon_grotesque_medium', Arial, Helvetica, sans-serif; font-weight:bold; color:#333333; letter-spacing:0.05em}
ul.menu-creas li a{padding:0.3em 0}
ul.menu-creas li a:hover, ul.menu-creas li a.on{border-bottom:solid 0.14em #c10075; }
#diapo_container h2, #diaporama_container h2{font-family: 'brandon_grotesque_medium', Arial, Helvetica, sans-serif; color:#000000; font-size: 0.95em; text-align:left; padding:4em 0 1em 2em; line-height: 135%;}
#diapo_container p, #diaporama_container p{padding:0 0 0 2em;}
#diapo_container h2 span, #diaporama_container h2 span{color:#000000}
.partager{color:#000000; text-transform:uppercase; font-family: 'brandon_grotesque_medium', Arial, Helvetica, sans-serif; font-size:0.75em; text-align:left; padding:2.6em; position:absolute; left:0; bottom:0}
img.diapo-rs{margin: 0 0 -0.4em 1.5em; width: 12%;}
.sup, .sub {font-size:65%; line-height: .8em;}
.sub { vertical-align: sub }
.sup { vertical-align: super }
sup, sub {line-height: .8em;}
.easyhtml5video{padding-top:4%}
.easyhtml5video video{padding:1em; background:#ffffff; width: 44%;}
#slider1_container .easyhtml5video p{padding:20px; background:#ffffff; color:#000000; text-shadow:none; width: 631px; margin-top: -22px;}
@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 80px) rotate3d(0, 1, 0, -190deg);
            transform: perspective(400px) translate3d(0, 0, 80px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 80px) rotate3d(0, 1, 0, -170deg);
            transform: perspective(400px) translate3d(0, 0, 80px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
            transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 80px) rotate3d(0, 1, 0, -190deg);
            transform: perspective(400px) translate3d(0, 0, 80px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 80px) rotate3d(0, 1, 0, -170deg);
            transform: perspective(400px) translate3d(0, 0, 80px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
            transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
}
@-webkit-keyframes alpha {
    from {
        opacity:0;
    }
    to   {
        opacity:1;
    }
}
@keyframes alpha {
    from {
        opacity:0;
    }
    to   {
        opacity:1;
    }
}
.content-slide{animation: alpha ease-in 2s;}
#owl-rs .content-slide{padding: 0.7em 0 0;}
.technos a:hover img, a.technos:hover img, a.flip:hover img, .expert a:hover img  {-webkit-animation: flip 1s linear 0s; animation: flip 1s linear 0s;}
a.flip{display:inline-block}
#owl-agency p.h1 {font-size: 3em;}
#owl-agency p.h1 span.pHome{
	color: #FFF;
	text-align: center;
	width: 80%;
	margin: 0px auto;
	font-size: 0.45em;
	line-height: 160%;
	padding: 0.6em 0px 0.9em;
	text-transform: none;
	font-family: "raleway",Arial,Helvetica,sans-serif;
	font-weight: normal;
	letter-spacing: 0.02em;
	display: block;
}
#owl-agency p.h11 {font-size: 3em;}
#owl-agency p.h11 span.pHome1{
	color: #FFF;
	text-align: center;
	width: 80%;
	margin: 0px auto;
	font-size: 0.45em;
	line-height: 160%;
	padding: 0.6em 0px 0.9em;
	text-transform: none;
	font-family: "raleway",Arial,Helvetica,sans-serif;
	font-weight: normal;
	letter-spacing: 0.02em;
	display: block;
}
#owl-agency a.blue{font-style: normal; background:#20a0c0; padding:0.7em 2em; border-radius:0.3em; display: inline-block; margin:0 auto; font-weight: normal;font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif; letter-spacing: 0;}

.moza{float:left; width:25%; color:#fff; position:relative}
.moza span{position:absolute; padding:20% 10% 0; display:block; width:80%; top:0; left:0; text-align:center; font-size: 129%;}
.moza .textgrey{color:#595959}
.moza img{display:block}
/*--------------------------------------------------------------------Fin CSS Pages------------------------------------------------------------*/
@media print, screen and (max-width:1600px){
	.reseaux{background-size: auto 100%; background-position: 50% 50%}
	.prix{background-size: auto 100%; background-position: 50% 50%}
	.easyhtml5video video{width: 42%;}
}
@media print, screen and (max-width:1500px){
	#top{background-size: auto 100%;}
}
@media print, screen and (max-width:1400px){
	.avant-titre{font-size: 1.4em; padding: 0.5em 1em 0;}
	.titre{font-size: 1.5em; line-height: 110%; padding:0.2em 2% 0; letter-spacing:0;}
	#owl-agency hr{display:none}
}
@media print, screen and (max-width:1024px){
	#content .col4 p, .content .col4 p, .engagements p{text-align:inherit}
	.expert{background-size: auto 100%; background-position: 50% 50%}
	p.technos{ text-align: left;}
	.easyhtml5video video{width: 34%; padding: 0.2em;}
	h1 {padding: 1em 1em 0.05em 1em;font-size: 2em;}
	#com-interne{left:0; top:52%}
	#change{left:4%; top:16%}
	#relations-agency{right:4%; top:16%}
	#developpement-clients{left:0; top:41%}
	#conseil{left:14%; top:4%}
	#plan-de-com-b2b{right:14%; top:4%}
	#generation-de-lead{right:0; top:41%}
	.people{width:25%; float:left}
	nav{width:75%; float:right}
	#owl-agency img{display:none}
	.moza span{padding:10% 10% 0; font-size: 114%;}
}
@media print, screen and (max-width:900px){
	.technos .col6{width: 96%; padding: 9em 2% 1em;}
	#com-interne{left:9%; top:52%}
	#change{left:13%; top:16%}
	#relations-agency{right:13%; top:16%}
	#developpement-clients{left:8%; top:41%}
	#conseil{left:23%; top:4%}
	#plan-de-com-b2b{right:23%; top:4%}
	#generation-de-lead{right:8%; top:41%}
	#owl-agency p.h1 {padding: 1em 1em 0.05em 1em;}
	.moza span{padding:5% 5% 0; width:90%; font-size: 100%;}
}
@media print, screen and (max-width:768px){
	header {position: relative;}
	nav{width:70%; float:left}
	.people{width:30%; float:left}
	#owl-agency p.h1 {font-size: 2em;}
	.col3{width:46%; float:left; padding:1em 2%}
	.col4{width:96%; float:left; padding:1em 2%}
	.col1{width:96%; float:left; padding:0 2%}
	.col8{width:96%; float:left; padding:1em 2%}
	.col2{width:98%; float:left; padding:1em 1%}
	.col10{width:96%; float:left; padding:0 2%}
	.expert .col1, .grey .col1, #content .col1{width:6.333333%; float:left; padding:1em 1%}
	.expert .col10, .grey .col10, #content .col10{width:81.333333%; float:left; padding:0 1%}
	a.connect-rs{display:inline-block;width:23%}
	.expert p {font-size: 1em;}
    #top img{display: none;}
	#creas a.creas {font-size: 1em;}
	#content .col4 p, .content .col4 p, .engagements p{font-size: 0.9em;}
	#top{padding: 1.5em 0 3.7em;text-shadow: 0 0 4em #594f50; background-position: 50% 50%}
	#top h1{font-size: 3em;}
	h2.technos{text-align: center;}
	p.technos{text-align: center;}
	#diapo_container h2, #diaporama_container h2{font-size: 1.7em; padding:2em 0 1em 1em; }
	#diapo_container p, #diaporama_container p {padding: 0 0 0 1.1em;font-size: 1.5em;}
	.partager{font-size:1.2em; padding: 10%; width: 80%;}
	img.diapo-rs {margin: 0 0 -0.4em 1em;width: 14%;}
	#content .col6, .content .col6{width:96%; float:left; padding:0 2%}
	.col5{width:96%; float:left; padding:0 2%}
	#content label, .content label{display:inline; padding:0}
	input, textarea, select{margin: 0 0 1em 0;}
	input[type="checkbox"], input[type="radio"]{margin: 0}
	section.top{padding: 0; height: auto;}
	h1 {padding: 1em 1em 0.5em 1em; font-size:1.5em}
	.owl-theme .owl-controls {padding: 0;}
	a.creas span.icon-lecture{position:absolute; width:100%; text-align:center; top: 4em; display:block}
	.col1 hr{display:none}
	#content h1, .content h1 {padding: 0.5em 0 1em; font-size:1.8em}
	.cote{display:none}
	blockquote hr{margin:1em 0 0.5em}
	#owl-agency h1{padding: 2em 1em 0.5em 1em;}
    #onglets_event .item { width: 50% !important;}
	.moza span{line-height:120%; font-size:90%}
        .btn-mobile{display: block; position: fixed; bottom: 0; left: 0; width: 100%; z-index:9999}
    .btn-mobile li{float: left;width:33.333333%}
    .btn-mobile a:link.btn-appel, .btn-mobile a:visited.btn-appel, .btn-mobile a:link.btn-mail, .btn-mobile a:visited.btn-mail, .btn-mobile a:link.btn-plus, .btn-mobile a:visited.btn-plus {
    display: block;
    padding: 0.52em 0 0.52em 2.8em;
    font-size: 1.1em;
    background: #594f50 url(../images/icon-appel.png) no-repeat;
    -moz-box-shadow: 0px -2px 5px 0px rgb(255,255,255);
    -webkit-box-shadow: 0px -2px 5px 0px rgb(255,255,255);
    -o-box-shadow: 0px -2px 5px 0px rgb(255,255,255);
    box-shadow: 0px -2px 5px 0px rgb(255,255,255);
    color:#ffffff;
    }
    .btn-mobile a:link.btn-mail, .btn-mobile a:visited.btn-mail{background: #594f50 url(../images/icon-mail.png) no-repeat;}
    .btn-mobile a:link.btn-plus, .btn-mobile a:visited.btn-plus{background: #594f50 url(../images/icon-plus.png) no-repeat;}
    #btn_up {bottom: 3em;}
    .btn-mobile a:hover.btn-appel, .btn-mobile a:active.btn-appel, .btn-mobile a:focus.btn-appel{background: #c10075 url(../images/icon-appel.png) no-repeat;}
    .btn-mobile a:hover.btn-mail, .btn-mobile a:active.btn-mail, .btn-mobile a:focus.btn-mail{background: #c10075 url(../images/icon-mail.png) no-repeat;}
    .btn-mobile a:hover.btn-plus, .btn-mobile a:active.btn-plus, .btn-mobile a:focus.btn-plus{background: #c10075 url(../images/icon-plus.png) no-repeat;}
}
@media print, screen and (max-width:640px){
	#com-interne{left:0; top:52%}
	#change{left:4%; top:16%}
	#relations-agency{right:4%; top:16%}
	#developpement-clients{left:0; top:41%}
	#conseil{left:14%; top:4%}
	#plan-de-com-b2b{right:14%; top:4%}
	#generation-de-lead{right:0; top:41%}
	.technos .col6{width: 100%; padding: 9em 0 1em;}
	a.sous-technos {width: 120px; height: 120px;}
    #onglets_event .item { width: 100% !important;}
	#owl-agency h1, #owl-agency p.h1 {padding: 0 0 0.05em 0;}
	.avant-titre{display:none}
	.titre{font-size: 1em; line-height: 110%; padding:0.2em 2% 0; letter-spacing:0;}
	#owl-agency a.blue{font-size: 1em;}
	.col6{width:96%; float:left; padding:0 2%}
	.moza{float:left; width:50%}
	.moza span{padding:10% 10% 0; width:80%; font-size: 129%;}
}
@media print, screen and (max-width:480px){
	nav{width:100%;}
	.people{width:100%; float:none}
	.col3{width:96%; float:left; padding:1em 2%}
	a.connect-rs{text-align:center}
	#top{padding: 0.5em 0 3.7em;}
	#top h1, #top .h1{font-size: 2em;}
	.notmobil{display:none}
	h1, .h1{padding: 1em 0 0.5em 0;}
	a.technos img{width:25%}
	a.sous-technos img{width:51%}
	#owl-agency h1, #owl-agency p.h1 {padding: 0.5em 0 0.05em 0; margin-top: -2em;}
	#owl-agency p{display:none}
	#owl-agency p.h1 span.pHome{width: 100%;line-height: 100%}
	#owl-agency p.h1{display:block}
	.titre{padding: 0.2em 2% 0.5em;}
	#owl-agency a.blue{font-size: 0.9em; padding:0.4em 1em}
	.moza span{padding:10% 5% 0; width:90%; font-size: 100%;}
	.btn-mobile a:link.btn-appel, .btn-mobile a:visited.btn-appel, .btn-mobile a:link.btn-mail, .btn-mobile a:visited.btn-mail, .btn-mobile a:link.btn-plus, .btn-mobile a:visited.btn-plus {
    padding: 0.6em 0 0.6em 2.8em;
    font-size: 0.9em;}
}
@media print, screen and (max-width:360px){
	a.connect{ padding:0.7em 2.5em; background: url('../images/savoirplus.png') no-repeat 4% 50%;}
	a:hover.connect, a:active.connect, a:focus.connect{padding:0.7em 2.5em; background: url('../images/savoirplus.png') no-repeat 96% 50%;}
	.titre{font-size:0.8em}
	#owl-agency a.blue{font-size: 0.8em; padding:0.2em 0.5em}
	.moza{float:left; width:100%}
	.moza span{padding:10% 10% 0; width:80%; font-size: 129%;}
	.btn-mobile a:link.btn-appel, .btn-mobile a:visited.btn-appel, .btn-mobile a:link.btn-mail, .btn-mobile a:visited.btn-mail, .btn-mobile a:link.btn-plus, .btn-mobile a:visited.btn-plus {
    padding: 0.8em 0 0.8em 3.5em;
    font-size: 0.72em;}
}