/* CSS Document by Black meridian */

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   global                                       <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

html {font-family: 'Montserrat', sans-serif; font-weight: 300;}
body {color: #fff; background: #000;}

h1 {position: relative; font-size: 115px; line-height: 116px; text-transform: uppercase; font-weight: 900; color: #242424;}
h2 {position: relative; top: -9px; margin: 160px 0 41px; padding-bottom: 87px; font-size: 48px; line-height: 50px; font-weight: 100; text-transform: uppercase; text-align: center;}
h2:first-child {margin-top: 0;}
h2:after {position: absolute; left: 50%; bottom: 0; width: 1px; height: 50px; content: ""; background: #37abb6;}
h2 em {font-style: inherit; color: #0098a6;}
h3 {position: relative; top: -6px; margin: 0 0 18px; font-size: 23px; line-height: 26px; font-weight: 300; color: #0098a6;}
h3:first-child {margin-top: 0;}
h4 {margin-bottom: 24px; font-size: 15px; font-size: 1.5rem; line-height: 24px; line-height: 2.4rem; text-transform: uppercase; font-weight: 300;}

ul, ol {margin-bottom: 24px;}
ul:last-child, ol:last-child {margin-bottom: 0;}
li {font-size: 15px; font-size: 1.5rem; line-height: 24px; line-height: 2.4rem;}
ul li:before {content: "_ ";}
ul li li {padding-left: 35px;}
ul li li:before {content: ". ";}
p {margin-bottom: 24px; font-size: 15px; font-size: 1.5rem; line-height: 24px; line-height: 2.4rem;}
p:last-child {margin-bottom: 0;}

.container {z-index: 1;}
.container-fluid {padding-left: 55px; padding-right: 55px;}

.navbar-toggle {display: none !important;}

.diamond {display: inline-block; position: relative; width: 52px; height: 52px; vertical-align: top; overflow: hidden; text-indent: -999em; text-align: left;}
.diamond a, .diamond > span {display: block; position: relative; width: 100%; height: 100%; overflow: hidden; text-indent: -999em; text-align: left;}
.diamond a:before, .diamond > span:before {position: absolute; left: 50%; top: 50%; margin: -19px; width: 38px; height: 38px; content: ""; background: #0098a6;}
.diamond a:before, .diamond > span:before {
  -webkit-opacity: 0.5;
     -moz-opacity: 0.5;
          opacity: 0.5;
  filter: alpha(opacity=50);
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: 0.2s -webkit-opacity;
     -moz-transition: 0.2s    -moz-opacity;
          transition: 0.2s         opacity;
}
.diamond a:hover:before,
.diamond a:focus:before,
.diamond:hover > span:before {
  -webkit-opacity: 1;
     -moz-opacity: 1;
          opacity: 1;
  filter: alpha(opacity=100);
}
.diamond a:after, .diamond > span:after {position: absolute; left: 50%; top: 50%; content: ""; background: no-repeat;}
.diamond a:after, .diamond > span:after {
  -webkit-background-size: contain;
     -moz-background-size: contain;
          background-size: contain;
}
.diamond.email a:after {margin: -6px -9px; width: 18px; height: 13px; background-image: url('images/email-icon.png');}
.diamond.facebook a:after {margin: -12px -7px; width: 13px; height: 25px; background-image: url('images/facebook-icon.png');}
.diamond.twitter a:after {margin: -8px -9px; width: 19px; height: 16px; background-image: url('images/twitter-icon.png');}
.diamond.linkedin a:after {margin: -10px -9px; width: 20px; height: 19px; background-image: url('images/linkedin-icon.png');}

.diamond a:hover:before,
.diamond a:focus:before,
.diamond:hover > span:before {
  -webkit-animation: rotate 0.2s forwards;
     -moz-animation: rotate 0.2s forwards;
          animation: rotate 0.2s forwards;
}

.button {margin: 70px 0; text-align: center;}
.button.margin-130 {margin: 130px 0;}
.button:first-child {margin-top: 0 !important;}
.button:last-child {margin-bottom: 0 !important;}
.button.text-left {text-align: left;}
.button.text-right {text-align: right;}

.btn {position: relative; z-index: 1; padding: 10px 30px 11px; border: 0; font-size: 15px; font-size: 1.5rem; line-height: 20px; line-height: 2rem; text-decoration: none !important; color: #fff !important; background: #0098a6; background-color: rgba(0, 152, 166, 0.5);}
.btn {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
  -webkit-transition: 0.2s color;
     -moz-transition: 0.2s color;
          transition: 0.2s color;
}
.overlay:hover ~ div .btn,
.overlay:focus ~ div .btn,
.btn:hover,
.btn:focus {color: #fff !important;} 
.btn:before {position: absolute; z-index: -1; left: 0; top: 0; right: 0; bottom: 0; content: ""; background: #0098a6;}
.btn:before {
  -webkit-opacity: 0;
     -moz-opacity: 0;
          opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: 0.2s -webkit-opacity;
     -moz-transition: 0.2s    -moz-opacity;
          transition: 0.2s         opacity;
}
.overlay:hover ~ div .btn:before,
.overlay:focus ~ div .btn:before,
.btn:hover:before,
.btn:focus:before {
  -webkit-opacity: 1;
     -moz-opacity: 1;
          opacity: 1;
  filter: alpha(opacity=100);
  -webkit-animation: expand 0.2s forwards;
     -moz-animation: expand 0.2s forwards;
          animation: expand 0.2s forwards;
}
.btn.grey {background-color: #242424;}

.hgroup {margin-bottom: 42px; text-align: center;}
.hgroup:last-child {margin-bottom: 0;}
.hgroup h1 {top: auto; margin: 0;}
.hgroup h1 + h2 {margin-top: -40px;}
.hgroup h2 {top: auto; padding: 0; margin: 0 0 13px; letter-spacing: 0.02em; text-transform: none; color: #6a6a6a;}
.hgroup h2:last-child {margin-bottom: 0;}
.hgroup h2:after {display: none;}
.hgroup p {display: inline-block; position: relative; font-size: 32px; line-height: 36px; font-style: italic; font-weight: 100; letter-spacing: 0.02em; color: #6a6a6a;}

.arrow-down {text-align: center;}
.arrow-down a {display: inline-block; vertical-align: bottom; width: 27px; height: 17px; overflow: hidden; text-indent: -999em; background: url('images/arrow-down.png') no-repeat 0 0;}
.arrow-down a {
  -webkit-background-size: contain;
     -moz-background-size: contain;
          background-size: contain;
}

.text {margin: 70px 0 110px; text-align: left;}
.text:first-child {margin-top: 0;}
.text:last-child {margin-bottom: 0;}

.noshadow {
  -webkit-box-shadow: none !important;
     -moz-box-shadow: none !important;
          box-shadow: none !important;
}
.illustration2 {margin-bottom: 60px; text-align: center;}
.illustration2:last-child {margin-bottom: 0;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   header                                       <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

#header {position: fixed; z-index: 110; left: 0; top: 0; right: 0; padding: 40px 0; background: #000;}
#header {
  -webkit-transition: 0.4s padding;
     -moz-transition: 0.4s padding;
          transition: 0.4s padding;
}
#header.mini {padding-top: 10px; padding-bottom: 10px;}

#nav {float: right; margin-top: 35px;}
#nav .nav {float: left;}
#nav .nav > li {float: left; margin-right: 95px;}
#nav .nav > li:last-child {margin-right: 0;}
#nav .nav > li > a {font-size: 15px; font-size: 1.5rem; line-height: 20px; line-height: 2rem; letter-spacing: 0.02em; color: #0098a6;}
#nav .nav > li > a {
  -webkit-transition: 0.2s color;
     -moz-transition: 0.2s color;
          transition: 0.2s color;
}
#nav .nav > li > a:hover,
#nav .nav > li > a:focus {color: #fff;}
#nav .nav > li.active > a {color: #fff;}
#nav .nav > li.active > a:before {position: absolute; left: 50%; bottom: 100%; margin-bottom: 7px; width: 1px; height: 9px; content: ""; background: #0098a6;}
#nav .nav > li.active > a:after {position: absolute; left: 50%; top: 100%; margin-top: 11px; width: 1px; height: 9px; content: ""; background: #0098a6;}
#nav .email {float: right; margin: -18px 0 0 85px;}

#logo {float: left; margin: 0;}
#logo a {display: block; margin: auto; width: 162px; height: 97px; overflow: hidden; text-indent: -999em; text-align: left; background: url('images/logo-black-meridian.png') no-repeat 0 0;}
#logo a {
  -webkit-background-size: contain;
     -moz-background-size: contain;
          background-size: contain;
}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   footer                                       <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

#footer {position: relative; z-index: 10; padding: 40px 0 70px; color: #6a6a6a; background: #000;}
#footer:before {position: absolute; left: 0; bottom: 100%; right: 0; height: 103px; content: ""; background: url('images/footer-cap.png') no-repeat 50% 100%;}
#footer:before {
  -webkit-background-size: 100% 103px;
     -moz-background-size: 100% 103px;
          background-size: 100% 103px;
}
#footer .bm {position: relative; margin: auto; width: 112px;}
#footer .bm:before {position: absolute; right: 100%; top: 50%; margin: 0 90px; width: 999em; height: 1px; content: ""; background: #303030;}
#footer .bm:after {position: absolute; left: 100%; top: 50%; margin: 0 90px; width: 999em; height: 1px; content: ""; background: #303030;}
#footer .logo {display: block; position: relative; width: 112px; height: 67px; overflow: hidden; text-indent: -999em; text-align: left; background: url('images/logo-black-meridian.png') no-repeat 0 0;}
#footer .logo {
  -webkit-background-size: contain;
     -moz-background-size: contain;
          background-size: contain;
}

#footer .contact {table-layout: fixed; margin-top: 25px;}
#footer .contact p {display: inline-block; margin: 0 37px 0 0; font-size: 14px; font-size: 1.4rem; line-height: 20px; line-height: 2rem;}
#footer .contact p:last-child {margin-right: 0;}
#footer .contact .table-cell {width: 50%; vertical-align: middle;}
#footer .contact .table-cell.social {width: 292px; text-align: center;}
#footer .contact .diamond {margin: 0 5px;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   wrapper                                  <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

.wrapper {position: relative; padding: 150px 0; text-align: center; background-clip: padding-box;}
.wrapper:before {position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ""; background: inherit;}
.wrapper.full-height {height: 100vh;}
.wrapper.full-height > .container,
.wrapper.full-height > .container > .table {height: 100%;}

.wrapper.noise:before {background: url('images/noise-bg.png') repeat 50% 0;}
.wrapper.noise .hgroup h1 {color: #0098a6;}
.wrapper.noise .hgroup h1 {
  -webkit-opacity: 0.4;
     -moz-opacity: 0.4;
          opacity: 0.4;
}
.wrapper.noise .hgroup h2 {color: #fff;}

.wrapper.banner {padding: 0 !important; background: no-repeat 50% 50%;}
.wrapper.banner {
  -webkit-background-size: cover;
     -moz-background-size: cover;
          background-size: cover;
}
.wrapper.banner > img {visibility: hidden;}

.wrapper.grey {background-color: #242424;}
.wrapper.grey .hgroup h1 {color: #0e0e0e;}
.wrapper.grey .hgroup h2 {color: #0098a6;}

.wrapper.lgrey {color: #818181; background-color: #e9e9e9;}
.wrapper.lgrey h2 {color: #1e1e1e;}
.wrapper.lgrey .hgroup h1 {color: #0e0e0e;}
.wrapper.lgrey .hgroup h2 {color: #0098a6;}
.wrapper.lgrey .btn {color: #838383 !important; background-color: #242424;}

.wrapper.lgrey .overlay:hover ~ div .btn,
.wrapper.lgrey .overlay:focus ~ div .btn,
.wrapper.lgrey .btn:hover,
.wrapper.lgrey .btn:focus {color: #fff !important;}

.wrapper.white {color: #000; background-color: #fefefe;}
.wrapper.white .hgroup h1 {color: #cbc9c9;}
.wrapper.white .hgroup h2 {color: #000;}
.wrapper.white .btn {background-color: #242424;}

.wrapper#wrapper-lagence {padding-bottom: 390px;}
.wrapper#wrapper-lagence:after {position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ""; background: url('images/lagence-bg2.png') no-repeat 50% 100% / 100% auto;}
.wrapper#wrapper-lagence:after {
  -webkit-opacity: 0.7;
     -moz-opacity: 0.7;
          opacity: 0.7;
}
.wrapper#wrapper-lagence h2 {color: #6a6a6a;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   topcontent                                   <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

#topcontent .wrapper:before {bottom: -71px;}
#topcontent + #maincontent .wrapper:first-child {padding-top: 79px; border-top: 71px solid transparent;}
#topcontent + #maincontent .wrapper:first-child:after {position: absolute; left: 0; top: -71px; right: 0; height: 71px; content: ""; background: url('images/cap.png') no-repeat 50% 100%;}
#topcontent + #maincontent .wrapper:first-child:after {
  -webkit-background-size: 100% 71px;
     -moz-background-size: 100% 71px;
          background-size: 100% 71px;
}
#topcontent + #maincontent .wrapper.grey:first-child:after {background-image: url('images/cap-grey.png');}
#topcontent + #maincontent .wrapper.lgrey:first-child:after {background-image: url('images/cap-lgrey.png');}
#topcontent + #maincontent .wrapper.white:first-child:after {background-image: url('images/cap-white.png');}

#topcontent .hgroup h1 {
  -webkit-opacity: 0.5;
     -moz-opacity: 0.5;
          opacity: 0.5;
}
#topcontent .hgroup h2 {color: #fff;}
#topcontent .hgroup p {color: #fff;}
#topcontent .hgroup h2:last-child,
#topcontent .hgroup p:last-child {display: inline-block;}
#topcontent .hgroup h2:last-child:before,
#topcontent .hgroup p:last-child:before {display: block; position: absolute; right: 100%; top: 50%; margin: 8px 25px; width: 999em; height: 1px; content: ""; background: currentColor;}
#topcontent .hgroup h2:last-child:after,
#topcontent .hgroup p:last-child:after {display: block; position: absolute; left: 100%; top: 50%; margin: 8px 25px; width: 999em; height: 1px; content: ""; background: currentColor;}

#topcontent .arrow-down {position: absolute; left: 0; bottom: 120px; right: 0;}

#topcontent .wrapper {padding: 300px 0 315px;}
#topcontent .wrapper:after {position: absolute; left: 0; top: 0; right: 0; height: 160px; content: ""; background: #000;}
#topcontent .wrapper .table {position: relative; z-index: 10;}

#topcontent .wrapper.noise {padding: 150px 0;}
#topcontent .wrapper.noise:after {display: none;}
#topcontent .wrapper.noise .hgroup h1 {color: #0098a6;}
#topcontent .wrapper.noise .hgroup h1 {
  -webkit-opacity: 0.4;
     -moz-opacity: 0.4;
          opacity: 0.4;
}
#topcontent .wrapper.noise .hgroup p {color: #6a6a6a;}
#topcontent .wrapper.noise .hgroup p:before {background: #303030;}
#topcontent .wrapper.noise .hgroup p:after {background: #303030;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   references                                   <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

.references {position: relative;}

.wrapper#wrapper-references .references {padding: 160px 0;}
.wrapper#wrapper-references .references:before {position: absolute; left: 50%; top: 0; width: 1px; height: 115px; content: ""; background: #0098a6;}
.wrapper#wrapper-references .references:after {position: absolute; left: 50%; bottom: 0; width: 1px; height: 115px; content: ""; background: #0098a6;}

.get1reference {position: relative; z-index: 1; margin-bottom: 130px; padding: 15px 0 0 15px;}
.get1reference:last-child {margin-bottom: 0;}
.get1reference:before {position: absolute; z-index: -1; left: 0; top: 0; width: 220px; height: 200px; content: ""; background: #040404;}
.get1reference:after {position: absolute; z-index: -1; left: 0; top: 0; width: 220px; height: 200px; content: ""; background: #df1968;}
.get1reference:after {
  -webkit-opacity: 0;
     -moz-opacity: 0;
          opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: 0.3s -webkit-opacity;
     -moz-transition: 0.3s    -moz-opacity;
          transition: 0.3s         opacity;
}
.get1reference .illustration {position: relative; z-index: 1;}
.get1reference .illustration:before {position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ""; background: #262626;}
.get1reference .illustration:before {
  -webkit-opacity: 0.6;
     -moz-opacity: 0.6;
          opacity: 0.6;
  filter: alpha(opacity=60);
  -webkit-transition: 0.3s -webkit-opacity;
     -moz-transition: 0.3s    -moz-opacity;
          transition: 0.3s         opacity;
}
.get1reference .illustration img {width: 100%; vertical-align: baseline;}
.get1reference .content {position: relative; z-index: 2; padding-top: 55px; text-align: center; color: #838383;}
.get1reference .content:before {position: absolute; left: 50%; top: 0; border: 1px solid #0098a6; margin: -20px; width: 40px; height: 40px; content: ""; background: #262626 url('images/plus.png') no-repeat 50% 50%;}
.get1reference .content:before {
  -webkit-background-size: 18px auto;
     -moz-background-size: 18px auto;
          background-size: 18px auto;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.8);
     -moz-box-shadow: 0 0 12px rgba(0,0,0,0.8);
          box-shadow: 0 0 12px rgba(0,0,0,0.8);
}
.get1reference .content h3 {top: auto; margin: 0; text-transform: uppercase; color: #fff;}
.get1reference .content p {font-size: 15px; font-size: 1.5rem; line-height: 20px; line-height: 2rem;}
.get1reference .content p:last-child {margin-bottom: -4px;}

.get1reference .overlay:hover ~ .illustration:before,
.get1reference .overlay:focus ~ .illustration:before {
  -webkit-opacity: 0 !important;
     -moz-opacity: 0 !important;
          opacity: 0 !important;
  filter: alpha(opacity=0) !important;
}
.get1reference:hover:after {
  -webkit-animation: corner 0.3s ease-in-out forwards;
     -moz-animation: corner 0.3s ease-in-out forwards;
          animation: corner 0.3s ease-in-out forwards;
}

.get1reference.item1:before,
.get1reference.item1:after {width: 10%; height: 60%;}

.get1reference.item2:before,
.get1reference.item2:after {width: 80%; height: 40%;}

.get1reference.item3:before,
.get1reference.item3:after {width: 30%; height: 30%;}

.get1reference.item4:before,
.get1reference.item4:after {width: 90%; height: 50%;}

.get1reference.item5:before,
.get1reference.item5:after {width: 90%; height: 50%;}

.get1reference.item6:before,
.get1reference.item6:after {width: 50%; height: 30%;}

.get1reference.item1:hover:after {
  -webkit-animation-name: corner1;
     -moz-animation-name: corner1;
          animation-name: corner1;
}

.get1reference.item2:hover:after {
  -webkit-animation-name: corner2;
     -moz-animation-name: corner2;
          animation-name: corner2;
}

.get1reference.item3:hover:after {
  -webkit-animation-name: corner3;
     -moz-animation-name: corner3;
          animation-name: corner3;
}

.get1reference.item4:hover:after {
  -webkit-animation-name: corner4;
     -moz-animation-name: corner4;
          animation-name: corner4;
}

.get1reference.item5:hover:after {
  -webkit-animation-name: corner5;
     -moz-animation-name: corner5;
          animation-name: corner5;
}

.get1reference.item6:hover:after {
  -webkit-animation-name: corner6;
     -moz-animation-name: corner6;
          animation-name: corner6;
}

.get1reference.color61:after {background-color: #df1968;}
.get1reference.color62:after {background-color: #cd0931;}
.get1reference.color63:after {background-color: #8ac33e;}
.get1reference.color64:after {background-color: #e44b6b;}

.references [class*="col-"] + [class*="col-"] {top: 35px; padding-top: 165px;}
.references [class*="col-"] + [class*="col-"] > .get1reference {padding-left: 0; padding-right: 15px;}
.references [class*="col-"] + [class*="col-"] > .get1reference:before {left: auto; right: 0;}
.references [class*="col-"] + [class*="col-"] > .get1reference:after {left: auto; right: 0;}

.wrapper.lgrey .get1reference .content h3 {color: #000;}
.wrapper.lgrey .get1reference:before {background: #b7b7b7;}
.wrapper.lgrey .get1reference .illustration {
  -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.25);
     -moz-box-shadow: 0 0 20px rgba(0,0,0,0.25);
          box-shadow: 0 0 20px rgba(0,0,0,0.25);
}
.wrapper.lgrey .get1reference .illustration:before {background: #fff;}
.wrapper.lgrey .get1reference .illustration:before {
  -webkit-opacity: 0.5;
     -moz-opacity: 0.5;
          opacity: 0.5;
}
.wrapper.lgrey .get1reference .content:before {background-color: #e9e9e9; background-image: url('images/plus-black.png');}
.wrapper.lgrey .get1reference .content:before {
  -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.4);
     -moz-box-shadow: 0 0 12px rgba(0,0,0,0.4);
          box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   clients                                      <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

.wrapper#wrapper-clients .hgroup h1 {display: inline-block;}
.wrapper#wrapper-clients .hgroup h1:before {position: absolute; right: 100%; top: 50%; margin: 0 80px; width: 999em; height: 1px; content: ""; background: #303030;}
.wrapper#wrapper-clients .hgroup h1:after {position: absolute; left: 100%; top: 50%; margin: 0 80px; width: 999em; height: 1px; content: ""; background: #303030;}

.clients {margin: 110px -34px 0; text-align: center;}
.get1client {display: inline-block; margin: 30px 34px; vertical-align: middle;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   savoir-faire                                 <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

.savoir-faire {display: inline-block; vertical-align: top;}
.savoir-faire:after {display: table; clear: both; content: "";}
.savoir-faire .get1savoirFaire {position: relative; float: left; margin-right: 120px; width: 220px;}
.savoir-faire .get1savoirFaire:last-child {margin-right: 0;}
.savoir-faire .btn {display: block; padding-left: 10px; padding-right: 10px; /*text-overflow: ellipsis;*/ white-space: normal;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>  technologies                                  <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

.get1tech {text-align: center;}
.get1tech .illustration {display: inline-block; margin-bottom: 30px; max-width: 180px; vertical-align: bottom; background: #cee5e7;}
.get1tech .illustration {
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
}
.get1tech .content:before {display: block; margin: 0 auto 35px; width: 25px; height: 1px; content: ""; background: #0098a6;}
.get1tech .content h3 {margin-bottom: -2px;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>  overview                                      <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

.overview {position: relative; z-index: 20; margin: -345px auto 90px;}

.device {position: relative; background: no-repeat 0 0;}
.device {
  -webkit-background-size: contain;
     -moz-background-size: contain;
          background-size: contain;
}
.device .screen {position: absolute; overflow: hidden;}
.device .screen img {width: 100%;}

.macbook {max-width: 884px;}
.macbook .device {padding-top: 58.4842%; background-image: url('images/macbook.png');}
.macbook .device:after {position: absolute; right: 9.6154%; top: 1.5474%; bottom: 10.8328%; width: 322px; content: ""; background: url('images/macbook-reflect.png') no-repeat 100% 0;}
.macbook .device:after {
  -webkit-background-size: auto 100%;
     -moz-background-size: auto 100%;
          background-size: auto 100%;
}
.macbook .device .screen {left: 11.9909%; top: 6.7698%; right: 11.9909%; bottom: 11.9923%;}

.ipad {max-width: 810px;}
.ipad .device {padding-top: 71.358%; background-image: url('images/ipad.png');}
.ipad .device .screen {left: 12.4691%; top: 5.8824%; right: 12.716%; bottom: 15.5709%;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>  projet                                        <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

.project {text-align: left;}
.project h3 {margin-bottom: 18px; color: #000;}
.project h4 {margin-bottom: 0;}
.project .infos p {margin-bottom: 17px; color: #000;}
.project .infos p:last-child {margin-bottom: 0;}

.project + .preview {margin-top: 83px;}
.preview {margin: 90px 0;}
.preview {
  -webkit-box-shadow: 0 0 70px rgba(0,0,0,0.25);
     -moz-box-shadow: 0 0 70px rgba(0,0,0,0.25);
          box-shadow: 0 0 70px rgba(0,0,0,0.25);
}
.preview:first-child {margin-top: 0;}
.preview:last-child {margin-bottom: 0;}

.preview-double {margin: 150px 0 110px;}
.preview-double:first-child {margin-top: 0;}
.preview-double:last-child {margin-bottom: 0;}
.preview-double .preview {margin-right: -50px;}
.preview-double [class*='col-'] + [class*='col-'] .preview {margin: 125px 0 0 -50px;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>  id                                            <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

#id40 #topcontent .wrapper.noise,
#id40 #topcontent .wrapper.noise:before {background: #000;}
#id40 #topcontent + #maincontent .wrapper:first-child {padding-top: 150px; border-top: 0;}
#id40 #topcontent + #maincontent .wrapper:first-child:after {top: 0; background-image: url('images/topcontent-cap.png');}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>  animations                                    <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

@-webkit-keyframes rotate {
  0%   {-webkit-transform: rotate(45deg);}
  100% {-webkit-transform: rotate(135deg);}
}
@-moz-keyframes rotate {
  0%   {-moz-transform: rotate(45deg);}
  100% {-moz-transform: rotate(135deg);}
}
@keyframes rotate {
  0%   {transform: rotate(45deg);}
  100% {transform: rotate(135deg);}
}

@-webkit-keyframes expand {
  0%   {left: 50%; right: 50%;}
  100% {left: 0; right: 0;}
}
@-moz-keyframes expand {
  0%   {left: 50%; right: 50%;}
  100% {left: 0; right: 0;}
}
@keyframes expand {
  0%   {left: 50%; right: 50%;}
  100% {left: 0; right: 0;}
}

@-webkit-keyframes corner1 {
  0%   {-webkit-opacity: 1; width: 0; height: 0;}
  100% {-webkit-opacity: 1; width: 10%; height: 60%;}
}
@-moz-keyframes corner1 {
  0%   {-moz-opacity: 1; width: 0; height: 0;}
  100% {-moz-opacity: 1; width: 10%; height: 60%;}
}
@keyframes corner1 {
  0%   {opacity: 1; width: 0; height: 0;}
  100% {opacity: 1; width: 10%; height: 60%;}
}

@-webkit-keyframes corner2 {
  0%   {-webkit-opacity: 1; width: 0; height: 0;}
  100% {-webkit-opacity: 1; width: 80%; height: 40%;}
}
@-moz-keyframes corner2 {
  0%   {-moz-opacity: 1; width: 0; height: 0;}
  100% {-moz-opacity: 1; width: 80%; height: 40%;}
}
@keyframes corner2 {
  0%   {opacity: 1; width: 0; height: 0;}
  100% {opacity: 1; width: 80%; height: 40%;}
}

@-webkit-keyframes corner3 {
  0%   {-webkit-opacity: 1; width: 0; height: 0;}
  100% {-webkit-opacity: 1; width: 30%; height: 30%;}
}
@-moz-keyframes corner3 {
  0%   {-moz-opacity: 1; width: 0; height: 0;}
  100% {-moz-opacity: 1; width: 30%; height: 30%;}
}
@keyframes corner3 {
  0%   {opacity: 1; width: 0; height: 0;}
  100% {opacity: 1; width: 30%; height: 30%;}
}

@-webkit-keyframes corner4 {
  0%   {-webkit-opacity: 1; width: 0; height: 0;}
  100% {-webkit-opacity: 1; width: 90%; height: 50%;}
}
@-moz-keyframes corner4 {
  0%   {-moz-opacity: 1; width: 0; height: 0;}
  100% {-moz-opacity: 1; width: 90%; height: 50%;}
}
@keyframes corner4 {
  0%   {opacity: 1; width: 0; height: 0;}
  100% {opacity: 1; width: 90%; height: 50%;}
}

@-webkit-keyframes corner5 {
  0%   {-webkit-opacity: 1; width: 0; height: 0;}
  100% {-webkit-opacity: 1; width: 90%; height: 50%;}
}
@-moz-keyframes corner5 {
  0%   {-moz-opacity: 1; width: 0; height: 0;}
  100% {-moz-opacity: 1; width: 90%; height: 50%;}
}
@keyframes corner5 {
  0%   {opacity: 1; width: 0; height: 0;}
  100% {opacity: 1; width: 90%; height: 50%;}
}

@-webkit-keyframes corner6 {
  0%   {-webkit-opacity: 1; width: 0; height: 0;}
  100% {-webkit-opacity: 1; width: 50%; height: 30%;}
}
@-moz-keyframes corner6 {
  0%   {-moz-opacity: 1; width: 0; height: 0;}
  100% {-moz-opacity: 1; width: 50%; height: 30%;}
}
@keyframes corner6 {
  0%   {opacity: 1; width: 0; height: 0;}
  100% {opacity: 1; width: 50%; height: 30%;}
}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>  media queries                                 <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina XS SM MD LG */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones XS SM MD LG */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets SM MD LG */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops  MD LG */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens LG */
@media only screen and (min-width : 1200px) {

}

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens XS SM MD */
@media only screen and (max-width : 1199px) {

}

/* Medium Devices, Desktops XS SM */
@media only screen and (max-width : 991px) {
  #nav .nav > li {margin-right: 45px;}
  #nav .email {margin-left: 45px;}

  .savoir-faire .get1savoirFaire {margin-right: 45px;}
}

/* Small Devices, Tablets XS */
@media only screen and (max-width : 767px) {
  h1 {font-size: 36px; line-height: 36px;}
  h2 {top: -2px; margin: 50px 0 18px; padding-bottom: 53px; font-size: 18px; line-height: 18px;}
  h2:after {height: 25px;}
  h3 {top: -2px; margin-top: 11px; margin-bottom: 7px; font-size: 16px; line-height: 18px;}
  h4 {font-size: 14px; line-height: 18px;}
  p {margin-bottom: 9px; font-size: 14px; line-height: 18px;}
  ul, ol {margin-bottom: 9px;}
  li {font-size: 14px; line-height: 18px;}

  [class*="col-"] + [class*="col-"] {margin-top: 30px;}

  #header {position: relative; padding: 20px 0;}
  #logo {float: none; padding-left: 4px; text-align: center;}
  #logo a {width: 98px; height: 59px;}

  .navbar-toggle {display: block !important; float: none; margin: 15px auto 0; padding: 0; border: 0; width: 36px; height: 36px; background: none;}
  .navbar-toggle {
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
  }
  .navbar-toggle .icon {position: relative; padding-top: 13px;}
  .navbar-toggle .icon:after {position: absolute; left: 50%; top: 50%; margin: -5.5px; width: 11px; height: 11px; content: ""; background: url('images/close.png') no-repeat 0 0;}
  .navbar-toggle .icon:after {
    -webkit-background-size: contain;
       -moz-background-size: contain;
            background-size: contain;
  }
  .navbar-toggle .icon-bar {display: none; position: relative; margin: 0 auto; width: 13px; height: 1px; overflow: hidden; background: #fff;}

  .navbar-toggle.collapsed .icon:after {display: none;}
  .navbar-toggle.collapsed .icon-bar {display: block;}

  #nav {float: none; margin: 0; text-align: center;}
  #nav .nav {float: none; padding-top: 32px;}
  #nav .nav > li {float: none; margin: 0;}
  #nav .nav > li + li {margin-top: 1px;}
  #nav .nav > li > a {padding: 5px 0; font-size: 12px; line-height: 16px;}
  #nav .nav > li.active > a:before,
  #nav .nav > li.active > a:after {display: inline-block; position: relative; left: auto; top: -1px; bottom: auto; margin: 0 5px; width: 10px; height: 1px; vertical-align: middle;}
  #nav .email {float: none; margin: 15px 0 0;}
  #nav .social {margin-top: 10px;}
  #nav .social .diamond {margin: 0 3px;}
  #nav .address {margin: 17px 0;}
  #nav .address p {margin: 0; font-size: 12px; line-height: 16px; color: #6a6a6a;}

  .container {padding-left: 25px; padding-right: 25px;}
  .diamond {width: 36px; height: 36px;}
  .diamond a:before, .diamond > span:before {margin: -12.5px; width: 25px; height: 25px;}
  .diamond.email a:after {margin: -4.5px -6.5px; width: 13px; height: 9px;}
  .diamond.facebook a:after {margin: -9.5px -4.5px; width: 9px; height: 17px;}
  .diamond.twitter a:after {margin: -5.5px -6.5px; width: 13px; height: 11px;}
  .diamond.linkedin a:after {margin: -6.5px -6px; width: 14px; height: 13px;}

  .hgroup {margin-bottom: 30px;}
  .hgroup h1 + h2 {margin-top: -16px;}
  .hgroup h2 {margin-bottom: 5px;}
  .hgroup p {font-size: 12px; line-height: 16px;}

  .button {margin: 40px 0;}
  .btn {padding: 7px 20px 6px; font-size: 12px; font-size: 1.2rem; line-height: 16px; line-height: 1.6rem;}

  .wrapper {padding: 70px 0;}
  .wrapper.full-height {height: auto;}

  #footer {padding: 15px 0;}
  #footer:before {height: 24px;}
  #footer:before {
    -webkit-background-size: 100% 24px;
       -moz-background-size: 100% 24px;
            background-size: 100% 24px;
  }
  #footer .contact {margin-top: 0;}
  #footer .contact .table-cell.social {width: auto;}

  #topcontent .wrapper:after {display: none;}

  #topcontent .hgroup h2:last-child:before,
  #topcontent .hgroup p:last-child:before,
  #topcontent .hgroup h2:last-child:after,
  #topcontent .hgroup p:last-child:after {margin: 2px 15px;}

  #topcontent .arrow-down {display: none;}

  #topcontent .wrapper,
  #topcontent .wrapper.noise {padding: 50px 0 35px;}

  #topcontent + #maincontent .wrapper:first-child {padding-top: 35px; border-top-width: 15px;}
  #topcontent + #maincontent .wrapper:first-child:after {top: -15px; height: 15px;}
  #topcontent + #maincontent .wrapper:first-child:after {
    -webkit-background-size: 100% 15px;
       -moz-background-size: 100% 15px;
            background-size: 100% 15px;
  }

  #wrapper-references.wrapper .references {padding: 80px 0;}
  #wrapper-references.wrapper .references:before {height: 35px;}
  #wrapper-references.wrapper .references:after {height: 35px;}

  #wrapper-lagence.wrapper {padding-bottom: 135px;}

  .get1reference {margin-bottom: 35px; padding: 8px 0 0 !important;}
  .get1reference .content {padding-top: 23px;}
  .get1reference .content:before {margin: -10px; width: 20px; height: 20px;}
  .get1reference .content:before {
    -webkit-background-size: 10px auto;
       -moz-background-size: 10px auto;
            background-size: 10px auto;
  }

  .get1reference .content p {font-size: 12px; line-height: 16px;}
  .references [class*="col-"] + [class*="col-"] {top: auto; margin-top: 35px; padding-top: 0;}

  .references .get1reference.item1 .illustration,
  .references .get1reference.item2 .illustration {margin-left: 8px;}
  .references .get1reference.item1:before,
  .references .get1reference.item1:after,
  .references .get1reference.item2:before,
  .references .get1reference.item2:after {left: 0 !important; right: auto !important;}

  .references .get1reference.item3 .illustration,
  .references .get1reference.item4 .illustration {margin-right: 8px;}
  .references .get1reference.item3:before,
  .references .get1reference.item3:after,
  .references .get1reference.item4:before,
  .references .get1reference.item4:after {left: auto !important; right: 0 !important;}

  .clients {margin: 32px -10px -25px;}
  .get1client {margin: 25px 10px; width: 25%;}

  .text {margin: 0;}
  .text [class*="col-"] + [class*="col-"] {margin-top: 11px;}

  .get1tech .illustration {max-width: 100px;}

  .savoir-faire {display: block;}
  .savoir-faire .get1savoirFaire {float: none; margin: 0 0 30px; width: auto;}
  .savoir-faire .get1savoirFaire:last-child {margin-bottom: 0;}
  .savoir-faire .get1savoirFaire .illustration {text-align: center;}

  .overview {margin: 0 0 45px;}

  .preview,
  .preview-double {margin: 45px 0;}
  .project + .preview {margin-top: 38px;}
  .preview-double .preview {margin: 0;}
  .preview-double [class*="col-"] + [class*="col-"] {margin-top: 45px;}
  .preview-double [class*="col-"] + [class*="col-"] .preview {margin: 0;}

  #id40 #topcontent + #maincontent .wrapper:first-child {padding-top: 50px;}
}

/* Extra Small Devices, Phones XS */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina XS */ 
@media only screen and (max-width : 320px) {
  
}