@charset "utf-8";
/* CSS Document */
/* Copyright 2015 Propaganda Design Inc. */

/*-------------------------------------------------------------------
	Base
-------------------------------------------------------------------*/
*, *:before, *:after, input, textarea, select { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
body { font-family:'Montserrat', sans-serif; font-weight:400; font-size:12px; background:#FFF; }
header { background:url(../images/common/bg-black.png) top #000; min-height:600px; padding:30px 40px; }
section { }
footer p { text-align:center; font-size:12px; }
h1 { font-size:108px; color:#FFF; margin:0 0 10px 0; text-transform:uppercase; font-weight:700; line-height:108px; text-align:right; }
h2 { font-size:14px; color:#FFF; text-align:right; line-height:17px; margin:0 0 20px 0; }
h3 { font-size: 33px; color: #1099cf; font-weight: 700; text-transform: uppercase;  margin: 10px 0 0 0; text-align: right; }
h4 { font-size: 25px; color: #1099cf; font-weight: 700; text-transform: uppercase;  margin: 20px 0 30px 0; }
p, ul, label { margin: 0 0 38px 0; font-size:14px; line-height:24px; color: #777676; }
label { margin:0; }
ul > li:before { content:"•"; padding:0 12px 0 0; display:inline-block; float:left; }
ul ul { margin:0 0 0 12px; }
ul > li { margin:4px 0 4px 0; }
ul { margin:0 0 20px 12px; list-style:none; text-indent:-12px; }
strong { font-weight:700; }
hr { border:none; height:1px; background:#CCC; margin:70px 0; }
table th { background:#333; padding:10px; text-align:left; font-size:14px; color:#FFF; }
table td { background:#f8f8f8; padding:10px; border-bottom:1px solid #eaeaea; }
table tr:nth-child(odd) td { background:#FFF; }
label { display:block; }
input, textarea, select { font-family:Arial,Helvetica,sans-serif; }
input[type=text], textarea, select, button { font-family:'Montserrat', sans-serif; font-weight:400; font-size:14px; color:#777676; -webkit-appearance:none; -moz-appearance:none; appearance:none; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; border:1px solid #CCC; display:block; width:100%; margin:0 0 20px 0; padding:8px 8px; }
input:focus, textarea:focus, input:hover, textarea:hover, select:focus, select:hover { outline:none; border:1px solid #1099cf; }
textarea { resize:vertical; min-height:150px; }
input[type=submit] { cursor:pointer; border:none; display:block; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
input[type='radio'] { opacity:0; float:left; width:16px; height:16px; cursor:default; padding:0; margin:0; }
input[type='radio'] + label { background-image:url(../images/common/radio-off.png); background-repeat:no-repeat; height:16px; padding:3px 0 0 20px; display:block; margin:0 0 8px 0; }
input[type='radio']:checked + label { background-image:url(../images/common/radio-on.png); }
input[type='checkbox'] { opacity:0; float:left; width:16px; height:16px; cursor:default; padding:0; margin:0; }
input[type='checkbox'] + label { background-image:url(../images/common/check-off.png); background-repeat:no-repeat; height:16px; padding:3px 0 0 20px; display:block; margin:0 0 8px 0; }
input[type='checkbox']:checked + label { background-image:url(../images/common/check-on.png); }
input[type="text"]:disabled { background:#dddddd; }
input:disabled:hover, textarea:disabled:hover { border:1px solid #CCC; }
select { background:url(../images/common/form-select.png) no-repeat center right; }
select:hover, select:focus { background:url(../images/common/form-select.png) no-repeat center right; }
::selection { background:#1099cf; color:#FFF; }
::-moz-selection { background:#1099cf; border:1px solid #607C8A; color:#FFF; }
::-webkit-input-placeholder { color:#999; }
:-moz-placeholder { color:#999; }
::-moz-placeholder { color:#999; }
:-ms-input-placeholder { color:#999; }

/*-------------------------------------------------------------------
	Modules (ex.: .box)
-------------------------------------------------------------------*/
.navigation { position:absolute; z-index:100; width:100%; left:0; font-size:0; padding:0 20px; background: url(../images/common/bg-header-pale.png); margin:40px 0 0 0; }
.navigation ul li:before { content:""; padding:0; float:none; display:inline; }
.navigation > ul { position:relative; z-index:1; margin:0; text-indent:0; font-size:0; }
.navigation > ul > li { display:inline-block; *display:inline; *zoom:1; vertical-align:top; margin:0; }
.navigation > ul > li > a { display:block; font-size:16px; color:#FFF; padding:20px; text-transform:uppercase; -webkit-transition:background .3s ease; -moz-transition:background .3s ease; -o-transition:background .3s ease; transition:background .3s ease; }
.navigation > ul > li:hover > a, .navigation > ul > .is-selected >  a { background: url(../images/common/bg-header.png); }
.navigation > ul > li > ul { zoom:1; filter:alpha(opacity=0); opacity:0; display:none; position:absolute; margin:0; }
.navigation > ul > li > ul > li { margin:0; text-indent:0px; }
.navigation > ul > li > ul > li > a { padding:7px 10px; background:#FFF; display:block; }
.navigation > ul > li > ul > li:hover > a { background:#CCC; }

/* Navigation trigger */
.navigation-trigger { width: 20px; height: 45px; margin:0 80px 0 0; float:right; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; }
.navigation-trigger span { display: block; position: absolute; height: 1px; width: 100%; background: #FFF; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
.navigation-trigger span:nth-child(1) { top: 0px; }
.navigation-trigger span:nth-child(2),.navigation-trigger span:nth-child(3) { top:8px; }
.navigation-trigger span:nth-child(4) { top: 16px; }
.navigation-trigger.open span:nth-child(1) { top: 8px; width: 0%; left: 50%; }
.navigation-trigger.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.navigation-trigger.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.navigation-trigger.open span:nth-child(4) { top: 8px; width: 0%; left: 50%; }
.navigation-trigger p { font-size: 22px; color: #FFF; font-weight: 700; text-transform: uppercase; margin: 0 0 0 30px; position: relative; top:-3px; }

/* Autres */
.header-section { width:76%; float:right; display:table; height:100%; }
.header-section .header-section-content { display:table-cell; height:100%; vertical-align:bottom; }
#logo { display:block; width:166px; height:19px; /*background:url(../images/common/logo.png);*/ color:#FFF; text-transform:uppercase; font-weight:700; font-size:32px; float:left; }
#logo span { display:block; }
.btn { display:block; float:right; border:none; cursor:pointer; background:#1099cf; font-size:14px; padding:10px 12px; color:#FFF; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease; opacity:1; margin:0 0 0 0; width:auto; }
.btn:hover { opacity:0.8; }
.btn-big { padding:20px 12px; font-size:16px; font-weight:400; }
.btn-subtil { display:block; margin:0 auto; color:#000; font-size:16px; text-transform:uppercase; font-weight:400; padding:0 0 0 0; }
.btn-subtil:before { content:""; display:block; height:1px; width:50%; max-width:200px; margin:0 auto 20px auto; }
.btn-list-subtil { display:block; margin:0 auto; color:#000; font-size:16px; text-transform:uppercase; font-weight:400; padding:0 0 0 0; }
.btn-list-subtil:after { content:""; display:block; height:1px; width:5%; max-width:100px; background:#c6c6c6; margin:20px auto 20px auto; }
.tasks { color: #777676; font-size: 11px; text-transform: uppercase; text-align: right; }
p.tasks { line-height:20px; font-size:12px; }
.tasks a { color:#1099cf; }
.project-link { font-size: 13px; color: #777676;  text-transform: uppercase; text-align: right; display: block; -webkit-transition: all .3s ease; -moz-transition: all .3s ease;    -o-transition: all .3s ease; transition: all .3s ease; }
.project-link-icon { display:block; margin:140px auto 40px auto; text-align:center;font-size: 13px;color: #777676;text-transform: uppercase; }
.project-link-icon:after { content:"";-webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease; display:block; width:140px; height:140px;-webkit-border-radius:140px; -moz-border-radius: 140px; border-radius: 140px; margin:20px auto 0 auto; background:url(../images/common/icon-link.png) #000 no-repeat center; background-size:50%; }
.services { text-align:center; }
.services > li { width:33.333%; float:left; padding:0 15px; }
.services > li > ul > li {  margin:0 0 10px 0 !important; }
.zap { text-align:center; }
.zap > li { width:25%; float:left; padding:0 25px; }
.zap p { line-height:18px; }
.icon { display:block; width:166px; height:166px; margin:0 auto 20px auto; background-color:#000; background-position:center; background-repeat:no-repeat; -webkit-border-radius:120px; -moz-border-radius: 120px; border-radius: 120px; padding:38px 0 0 0; }
.icon i { font-size:90px !important; color:#FFF !important; }
.icon-strategy { background-image:url(../images/common/icon-strategy.png); }
.icon-design { background-image:url(../images/common/icon-design.png); }
.icon-development { background-image:url(../images/common/icon-development.png); }
.icon-recadre { background-image:url(../images/common/icon-recadre.png); }
.icon-active { background-image:url(../images/common/icon-active.png); }
.icon-user { background-image:url(../images/common/icon-user.png); }
.icon-update { background-image:url(../images/common/icon-update.png); }
.team { display:block; margin:0 auto 20px auto; width:100%; height:202px; background-position:center bottom; background-repeat:no-repeat; }
.team-pascal { background-image:url(../images/common/team-pascal.png); }
.team-daniel { background-image:url(../images/common/team-daniel.png); }
.team-guillaume { background-image:url(../images/common/team-guillaume.png); }
.team-hugues { background-image:url(../images/common/team-hugues.png); }
#map_canvas { height:600px; }
.map-header { min-height:0; height:600px; position:absolute; top:0; z-index:100; background: url(../images/common/bg-header.png); background:none; width:100%; }
.gm-style a img, .gmnoprint { display:none; }
.devices { position:relative; height:500px; margin:30px 0 30px 0; }
.device { display:block; background-size:cover; background-position:center top; position:absolute; bottom:0; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border:9px solid #231f20; background:#FFF;  }
.device-ipad { width:285px; height:421px; z-index:2; border-top-width:40px; border-bottom-width:40px; }
.device-iphone { width:140px; height:293px; right:0; z-index:2; border-top-width:40px; border-bottom-width:40px; }
.device-monitor { width:740px; height:460px; left:50%; margin:0 0 0 -370px; bottom:40px; background-size:cover; }
.device-reflection { display:block; position:absolute; width:100%; height:100%; background:url(../images/common/reflection.png) right no-repeat; background-size:cover; right:0; top:-0; }
/*.device-monitor .device-reflection { right:-9px; top:-9px; }*/
.mosaicflow__column { float:left; width:50%;padding: 0 0 0 15px; }
.mosaicflow__item img { display:block; width:100%; height:auto; padding: 0 0 30px 0; }
.mosaicflow__column:nth-child(2n) { padding:0 15px 0 0; }
.project-list { font-size:30px; line-height:32px; text-transform:uppercase; color:#FFF; font-weight:700; text-align:right; display:table; width:100%; margin:0 0 30px 0; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease;  }
.project-list:hover, .project-list.hover { -ms-transform: scale(0.9,0.9); /* IE 9 */
    -webkit-transform: scale(0.9,0.9); /* Safari */
    transform: scale(0.9,0.9); }
.project-list-element, .project-list-tasks { position:relative; width:100%; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease; }
.project-list-element { display:table-cell; vertical-align:bottom; }
.project-list-tasks { display:block; opacity:0; height:1px; }
.project-list-tasks p { color:#FFF;margin:0; font-size:12px; line-height:15px; }
.project-list:hover .project-list-tasks { display:block; opacity:0.7; }
.is-client-list .project-list { background:#CCC !important; font-size:20px; line-height:22px; }
.project-list-element-small { font-size:20px; line-height:22px;  }
.arrow-left { display:block; width:6px; height:56px; background-image:url(../images/common/arrow-left-black.png);background-repeat:no-repeat; background-position:center; }
.arrow-right { display:block; width:6px; height:56px; background-image:url(../images/common/arrow-right-black.png); background-repeat:no-repeat; background-position:center; }
.btn-email { display:block; margin:0 auto 70px auto; text-align:center; color:#000; }
.btn-email i { font-size:30px !important; }
.show { display:block; }
.hide { display:none; }

/*-------------------------------------------------------------------
	States (ex.: .is-collapsed)
-------------------------------------------------------------------*/
.app-msg { padding:15px; font-size:16px; color:#FFF; line-height:20px; }
.app-msg > p { display:block; clear:both; line-height:22px; }
.app-msg > p > .msg-icon { width:23px; height:23px; display:block; float:left; margin:0 5px 9px 0; }
.app-msg strong { font-weight:bold; }
.msg { padding:15px; font-size:16px; color:#FFF; line-height:20px; margin:0 0 10px 0; }
.msg > p { display:block; clear:both; line-height:22px; margin:0; color:#FFF; }
.msg > p > .msg-icon { width:23px; height:23px; display:block; float:left; margin:0 5px 9px 0; }
.msg strong { font-weight:bold; }
.is-success { background:#89A418; }
.is-success > p > .msg-icon { background:url(../images/common/icon-success.png); }
.is-failure { background:#F44236; }
.is-failure > p > .msg-icon { background:url(../images/common/icon-error.png); }
input.is-error { border:1px solid #F44236 !important; color:#F44236; }
label.is-error { color:#F44236; position:relative; top:-20px; }
.is-error::-webkit-input-placeholder { color:#F44236; }
.is-error:-moz-placeholder { color:#F44236; }
.is-error::-moz-placeholder { color:#F44236; }
.is-error:-ms-input-placeholder { color:#F44236; }
.is-successful { border:1px solid #8BC24A !important; color:#8BC24A; }
.is-successful::-webkit-input-placeholder { color:#8BC24A; }
.is-successful:-moz-placeholder { color:#8BC24A; }
.is-successful::-moz-placeholder { color:#8BC24A; }
.is-successful:-ms-input-placeholder { color:#8BC24A; }
.last-row-is-highlighted td:last-child { background:#52a2ff; }
.is-text-centered { text-align:center; }
.is-full-width { display:block; width:100%; }
.is-black { color:#000; }
.has-no-bottom-margin { margin-bottom:0; }
.has-rounded-corners { -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }
.has-box-shadow { -webkit-box-shadow:4px 4px 0px 0px rgba(0,0,0,0.75); -moz-box-shadow:4px 4px 0px 0px rgba(0,0,0,0.75); box-shadow:4px 4px 0px 0px rgba(0,0,0,0.75); margin-bottom:4px; }
.has-blue-bg { background:#2095F2;}
.has-red-bg { background:#F44236; }
.has-yellow-bg { background:#FEC107; }
.has-green-bg { background:#8BC24A; }
.has-no-bullets { text-indent:0; margin:0; }
.has-no-bullets li:before { content:""; padding:0; float:none; display:inline; }
.has-20-bottom-margin { margin-bottom:20px; }
.has-20-padding { padding:20px; }
.has-30-bottom-margin { margin-bottom:30px; }
.has-80-top-margin { margin-top:80px; }
.has-120-top-margin { margin-top:250px; }
.has-small-gaps { margin:20px 0; }
.has-col-small-gaps { margin:0 0 20px 0; }
.has-grey-bg { background:#ebebeb; }
.is-right-aligned { text-align:right; }
table tr:hover td { background:#f1f1f1 !important; }
.navigation > ul > li > .is-hover { zoom:1; filter:alpha(opacity=100); opacity:1; display:block; }