/* ==========================================================================
	Theme name : Main layout
	Date : 14/07/15
	Description : Feuille de style
	Version : 1.0
	Author : labonneboite
   ========================================================================== */

/* ==========================================================================
   INDEX
		1 - General Classes
			1.1 - Structure
			1.2 - Preloader
			1.3 - Typography
			1.4 - Lines
		2 - Home
			2.1 - Menu
			2.2 - Home header
			2.3 - Home main
			2.4 - Home footer
		3 - Content
			3.1 - Slider
			3.2 - Portfolio
			3.3 - Forms
				3.3.1 - Layout
				3.3.2 - Custom select
				3.3.3 - Tooltips
				3.3.4 - Errors
			3.4 - Off-canvas
		4 - Footer
		5 - Scroll-up
		6 - Admin news
		7 - Media queries
		8 - Fonts

   ========================================================================== */

/* ==========================================================================
		1 - General Classes
   ========================================================================== */
html,
body {
	height: 100%;
	overflow-x: hidden;
}

body {
	background-color: #d2d4d5;
	color: #64696a;
	font-family: "novecento_normal", Arial, sans-serif;
	font-size: 1.4em;
	line-height: 1.5;
}

.no-touch .unselectable {
	-webkit-touch-callout: none;
       -webkit-user-select: none;
         -khtml-user-select: none;
          -moz-user-select: none;
            -ms-user-select: none;
                    user-select: none;
}

button {
    display: inline-block;
    padding: 7px 16px;
    color: #fff;
    font-family: 'novecento_bold', Arial, sans-serif;
    font-size: 1.143em;
    outline: none;
    border: none;
    background-color: #15abd2;
    -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
      -ms-border-radius: 4px;
       -o-border-radius: 4px;
          border-radius: 4px;
    -webkit-transform: scaleY(1.05);
       -moz-transform: scaleY(1.05);
        -ms-transform: scaleY(1.05);
         -o-transform: scaleY(1.05);
            transform: scaleY(1.05);
    cursor: pointer;
}

button.inverse {
    border: 1px solid #fff;
}

.no-touch button {
	-webkit-transition: background-color 0.5s ease-in-out;
		-moz-transition: background-color 0.5s ease-in-out;
               transition: background-color 0.5s ease-in-out;
}

.no-touch button:hover {
	background-color: #9fa5a7;
	-webkit-transition: background-color 0.5s ease-in-out;
		-moz-transition: background-color 0.5s ease-in-out;
               transition: background-color 0.5s ease-in-out;
}

.no-touch button.inverse:hover {
    background-color: #fff;
    color: #15abd2;
    -webkit-transition: background-color 0.5s ease-in-out;
		-moz-transition: background-color 0.5s ease-in-out;
               transition: background-color 0.5s ease-in-out;
}

.hide {
	display: none;
}

/* ==========================================================================
		1.1 - Structure
   ========================================================================== */
#page {
	background: #d2d4d5;
	overflow-x: hidden;
}

#home {
	max-height: 100%;
	padding: 0 10px;
}

/* ==========================================================================
		1.2 - Preloader
   ========================================================================== */
#preloader {
	background: #d2d4d5;
	z-index: 9999;
}

#spin {
	width: 50px;
	height: 50px;
	border: 10px solid #15abd2;
	border-top: 10px solid rgba(0,0,0,0);
	border-left: 10px solid rgba(0,0,0,0);
	cursor: wait;
	opacity: 0.8;
	-webkit-border-radius: 50px;
	   -moz-border-radius: 50px;
	           border-radius: 50px;
	-webkit-animation: spin .5s infinite linear;
	   -moz-animation: spin .5s infinite linear;
		 -ms-animation: spin .5s infinite linear;
		   -o-animation: spin .5s infinite linear;
			   animation: spin .5s infinite linear;
	z-index: 9999;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@-moz-keyframes spin {
	0% { -moz-transform: rotate(0deg); }
	100% { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

/* ==========================================================================
		1.3 - Typography
   ========================================================================== */

h1,
h2,
h3,
.h1-like,
.h2-like,
.h3-like {
    font-family: 'novecento_bold', Arial, sans-serif;
    line-height: 1;
}

h1,
.h1-like {
    float: left;
    color: #15abd2;
    font-size: 3.286em;
    margin-top: 0;
    padding-top: 3px;
    padding-left: 30px;
}

#content-clients h1 {
    float: none;
    padding-left: 0;
}

h2,
h3,
h4,
.h2-like,
.h3-like,
.h4-like{
    color: #64696a;
}


h2,
.h2-like {
    font-size: 1.571em;
    padding-top: 5px;
    padding-right: 30px;
}

h2.inverse {
    color: #fff;
    font-family: 'lato_bold', Arial, sans-serif;
}

h2.title-article {
	color: #64696a;
}

h2.title-clients {
	color: #9ea5a6;
}

.title-article,
.title-clients,
.snap-drawer h2 {
	font-size: 1.571em;
	line-height: 1;
    margin-top: 5px;
	-webkit-transform: scale(1, 1.05);
       -moz-transform: scale(1, 1.05);
         -ms-transform: scale(1, 1.05);
           -o-transform: scale(1, 1.05);
               transform: scale(1, 1.05);
}

h3,
.h3-like {
    font-size: 1.286em;
	font-family: 'novecento_bold', Arial, sans-serif;
	text-transform: uppercase;
}

h3 > img {
	vertical-align: middle;
	margin-right: 8px;
}

h3.news-admin {
	color: #15abd2;
}

h3 + p {
	margin-top: 0;
}

img + h3 {
	margin-top: 15px;
}

article h3 {
	color: #64696a;
	text-align: center;
}

.form-sections > h3 {
	color: #15abd2;
	font-size: 19px;
	text-align: left;
	line-height: 40px;
}

h4,
.h4-like {
    font-size: 1.143em;
}

p {
	color: #64696a;
	font-size: 1.286em;
	font-family: "lato_light", Arial, sans-serif;
	line-height: 1.125;
	text-align: center;
}

p.txtfooter {
	font-size: 1.1em;
	line-height: 40px;
}

p.introduction {
    font-size: 1.571em;
    padding-bottom: 80px;
}

p.speech {
    font-size: 1.571em;
    padding-top: 20px;
    padding-bottom: 40px;
}

p.date {
	margin-top: -5px;
	font-size: 0.750em;
	text-align: left;
	line-height: 14px;
}

p > strong {
	font-weight: 900;
}

#legal-notice p {
	text-align: left;
}

.head .hr {
    padding-top: 3px;
    width: 7px;
    height: 50px;
    float: left;
    background-color: #15abd2;
    border: 0;
}

a,
a:link,
a:visited,
a:active,
a:focus {
	color: #64696a;
	text-decoration: none;
	outline: none !important;
}

.no-touch a:hover {
	text-decoration: underline;
	outline: none !important;
}

a[href^="mailto:"] {
	font-weight: bold;
}

.snap-drawer h2,
.snap-drawer h3,
.snap-drawer h4,
.snap-drawer p {
	color: #fff;
}

.snap-drawer h4 {
    font-family: "novecento_bold", Arial, sans-serif;
}

.snap-drawer h2 {
	padding: 35px 0 0 0;
}

.snap-drawer p {
	font-size: 1.2857em;
	font-family: "lato_light", Arial, sans-serif;
	line-height: 1.125;
	text-align: left;
}

span.nowrap {
	white-space: nowrap;
}

/* ==========================================================================
		1.4 - Lines
   ========================================================================== */
.line-blue-small,
.line-white-small,
.line-blue-medium,
.line-grey-full {
	display: block;
	height: 1px;
	border: 0;
}

.line-blue-small,
.line-white-small,
.line-blue-medium {
	margin: 5px auto 30px auto;
}

.line-blue-small,
.line-blue-medium {
	background: #15abd2;
}

.line-grey-full {
	background: #9fa5a7;
}

.line-white-small {
	background: #fff;
    margin-top: 20px;
}

hr.line-blue-small,
hr.line-white-small {
	width: 150px;
}

hr.line-blue-medium,
hr.line-grey-full {
	width: 100%;
}

/* ==========================================================================
		2 - Home
   ========================================================================== */
#home-header {
	height: 90px;
}

#home-footer {
	height: 70px;
}

/* ==========================================================================
		2.1 - Menu
   ========================================================================== */
#menu {
	position: fixed;
	height: 154px;  /* 154px avec portfolio, 130px sans portfolio */
	width: 40px;
	left: 0;
	top: 0;
	bottom: 0;
	padding-left: 10px;
	margin: auto;
	z-index: 4;
}

#menu a {
	display: block;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	           border-radius: 50%;
	width: 14px;
	height: 14px;
	margin: 10px;
	background-color: #9fa5a7;
	z-index: 4;
}

#menu a:hover {
	background-color: #15abd2;
	cursor: pointer;
}

.no-touch #menu a:hover {
	-webkit-transition: background-color 0.5s ease-in-out;
		-moz-transition: background-color 0.5s ease-in-out;
               transition: background-color 0.5s ease-in-out;
}

.no-touch #menu a {
	-webkit-transition: background-color 0.5s ease-in-out;
		-moz-transition: background-color 0.5s ease-in-out;
               transition: background-color 0.5s ease-in-out;
}

.current {
	background-color: #15abd2 !important;
}

/* ==========================================================================
		2.1 - Menu tiny
   ========================================================================== */
#home-footer-tiny {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	margin: auto;
}

#btn-menu-tiny {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	height: 32px;
	width: 68px;
	margin: auto;
	padding: 7px 3px;
	font-size: 0.938em;
	border-radius: 7px;
	background: #15abd2;
	z-index: 6;
}

#menu-tiny {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	margin: auto;
	height: 195px;
	width: 200px;
	background: #15abd2;
	border-radius: 4px;
	z-index: 5;
}

.navbar-tiny li {
	padding: 5px;
}

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

.menu-tiny-close {
	background: #15abd2 url(../images/close@2x.png) center no-repeat !important;
	background-size: 15px 15px !important;
}

/* ==========================================================================
		2.2 - Home header
   ========================================================================== */
.logo {
	padding-top: 32px;
	float: left;
}

.icon-clients {
	padding-top: 50px;
	float: right;
}

/* ==========================================================================
		2.3 - Home main
   ========================================================================== */
.halo {
    top: 200px;
    left: -500px;
	opacity: 1;
	z-index: -1;
}

#content-laboite {
	width: 910px;
	height: 536px;
    left: 50px;
	z-index: 2;
}

#content-clients {
	top: -50px;
	height: 285px;
	z-index: 3;
}

.tin {
	position: absolute;
	left: 24px;
	top: 0;
}

.slogan {
    position: absolute;
    left: 372px;
    color: #15abd2;
    font-family: 'novecento_bold', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    -webkit-transform: scaleY(1.05);
     -moz-transform: scaleY(1.05);
      -ms-transform: scaleY(1.05);
       -o-transform: scaleY(1.05);
          transform: scaleY(1.05);
}

.fst-sentence {
    top: 158px;
    font-size: 3.429em;
}

.snd-sentence {
    top: 157px;
    font-size: 5.071em;
}

.pursuit {
    position: absolute;
    left: 379px;
    top: 267px;
    color: #64696a;
    font-family: 'lato_light', Arial, sans-serif;
    font-size: 1.857em;
    font-weight: 300;
    text-align: left;
    letter-spacing: -0.2px;
}

.more {
    position: absolute;
    left: 382px;
    top: 382px;
}

.news-frame {
  position: absolute;
  left: 4px;
  top: 337px;
  width: 86px;
  height: 86px;
  border: 1px solid #15abd2;
  -webkit-transform: rotate(-7deg);
     -moz-transform: rotate(-7deg);
      -ms-transform: rotate(-7deg);
       -o-transform: rotate(-7deg);
          transform: rotate(-7deg);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
      -ms-border-radius: 4px;
       -o-border-radius: 4px;
          border-radius: 4px;
}

.no-touch .news-frame:hover {
	border: 1px solid #969d9f;
	-webkit-transition: border 0.5s;
       -moz-transition: border 0.5s;
	        transition: border 0.5s;
}

.news-frame-active {
	border: 1px solid #9fa5a7;
}

.news-frame-inactive {
	border: 1px solid #15abd2;
}

.news-qmark {
  position: relative;
  top: 11px;
  left: 1px;
  color: #15abd2;
  font-size: 4.286em;
  line-height: 1;
  font-family: "lato_light", Arial, sans-serif;
  -webkit-transform: matrix(0.99374925, -0.11163525, 0.11163525, 0.99374925, 0, 0);
     -moz-transform: matrix(0.99374925, -0.11163525, 0.11163525, 0.99374925, 0, 0);
      -ms-transform: matrix(0.99374925, -0.11163525, 0.11163525, 0.99374925, 0, 0);
       -o-transform: matrix(0.99374925, -0.11163525, 0.11163525, 0.99374925, 0, 0);
          transform: matrix(0.99374925, -0.11163525, 0.11163525, 0.99374925, 0, 0);
  -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
       -o-transform: rotate(0deg);
          transform: rotate(0deg);
}

.no-touch .news-qmark:hover {
	color: #9fa5a7;
	-webkit-transition: 0.5s;
		-moz-transition: 0.5s;
	            transition: 0.5s;
}

.news-qmark-active {
	color: #9fa5a7;
}

.news-qmark-inactive {
	color: #15abd2;
}

.arrow-next {
    z-index: 4;
}

/* ==========================================================================
		3 - Content
   ========================================================================== */
article {
	padding: 80px 0;
	background: #d2d4d5;
}

article.inverse {
    background: #15abd2;
}

article.marketing {
    padding-top: 0;
}

.separation {
    border-right: 10px;
    border-right-color: green;
}

.line .head {
    text-align: center;
}

.col-icon {
    width: 80px;
    float: left;
}

.col-text {
    float: none;
    width: auto;
}

.col-solo {
    padding-left: 80px;
}

.icon-services,
.icon-assets,
.icon-process,
.icon-news {
    top: 0;
    float: right;
    margin-right: 12px;
}

.icon-technos {
    margin: 20px 35px;
}

.icon-include {
    line-height: 1;
    margin-right: 10px;
}

.txt-include {
    line-height: 20px;
}

.background-fixed {
	height: 350px;
	background-repeat: repeat;
	background-position: center;
	background-attachment: fixed;
}

.touch .background-fixed {
	background-attachment: scroll;
}

.n01 {
	background-image: url(../images/background-01.jpg);
	background-size: 500px 432px;
}

.n02 {
	background-image: url(../images/background-02.jpg);
}

.n03 {
	background-image: url(../images/background-03.jpg);
	background-size: 500px 432px;
}

.touch .number-01,
.touch .number-03 {
	background-size: 290px 250px ;
}

.touch .number-02 {
	background-size: 233px 350px;
}

.caps {
	padding: 32px 0;
}

.visuel-prestations {
	padding: 15px 0 35px 0;
}

.numerotation-fond {
	width: 40px;
	height: 40px;
	display: inline-block;
	margin-right: 10px;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	             border-radius: 4px;
	background-color: #15abd2;
}

.numerotation-number {
	font-family: 'novecento_bold', Arial, sans-serif;
	font-size: 36px;
	font-weight: bold;
	color: #fff;
	-webkit-transform:scale(1, 1.05);
      -moz-transform:scale(1, 1.05);
        -ms-transform:scale(1, 1.05);
          -o-transform:scale(1, 1.05);
               transform:scale(1, 1.05);
}

.etapes .numerotation-fond {
	margin-bottom: 20px;
}

/* ==========================================================================
		3.1 - Slider
   ========================================================================== */
.slider .item {
	padding: 0 10px;
}

.nav-slider {
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}

.nav-slider .btn-prev,
.nav-slider .btn-next {
	width: 45px;
	height: 45px;
	top: 0;
	bottom: 0;
	margin: auto;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	           border-radius: 4px;
	background-color: #15abd2 ;
	background-size: 12px 19px;
	z-index: 4;
}

.btn-prev {
	background: url('../images/fleche-gauche@2x.png') center no-repeat;
}

.btn-next {
	background: url('../images/fleche-droite@2x.png') center no-repeat;
}

.no-touch .btn-prev:hover,
.no-touch .btn-next:hover {
	background-color: #9fa5a7;
}

.no-touch .btn-prev,
.no-touch .btn-next {
	-webkit-transition: background-color 0.5s ease-in-out;
		-moz-transition: background-color 0.5s ease-in-out;
               transition: background-color 0.5s ease-in-out;
}

.no-touch .btn-prev:hover,
.no-touch .btn-next:hover {
	-webkit-transition: background-color 0.5s ease-in-out;
		-moz-transition: background-color 0.5s ease-in-out;
               transition: background-color 0.5s ease-in-out;
}

/* ==========================================================================
		3.2 - Portfolio
   ========================================================================== */
.cbp-l-filters-alignCenter .cbp-filter-item {
	display: inline-block;
	padding: 6px 12px;
	color: #fff;
	font-family: "novecento_bold", Arial, sans-serif;
	text-decoration: none;
	background: #15abd2;
    margin: 5px;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	           border-radius: 4px;
	-webkit-transition: background 0.5s ease-in-out;
	    -moz-transition: background 0.5s ease-in-out;
	            transition: background 0.5s ease-in-out;
}

.cbp-caption-defaultWrap {
    background-color: #d2d4d5;
}

.cbp-l-filters-alignCenter .cbp-filter-item:hover {
    color: #fff;
	background: #9fa5a7;
	-webkit-transition: background 0.5s ease-in-out;
	    -moz-transition: background 0.5s ease-in-out;
	            transition: background 0.5s ease-in-out;
}

.cbp-l-filters-alignCenter .cbp-filter-item.cbp-filter-item-active {
    color: #fff;
	background: #9fa5a7;
}

.cbp-l-filters-alignCenter .cbp-filter-counter {
    margin: 12px auto;
    font-family: "lato_light", Arial, sans-serif;
    -webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	           border-radius: 5px;
	border: none;
	background: #15abd2;
	color: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
}

.cbp-l-filters-alignCenter .cbp-filter-counter:before {
    bottom: -4px;
    left: 0;
    right: 0;
    border-top: 4px solid #15abd2;
}

.cbp-caption-expand .cbp-l-caption-body {
    font-family: "lato_light", Arial, sans-serif;
    color: #fff;
    padding: 0 0 20px 26px;
}

.cbp-caption-expand .cbp-caption-defaultWrap {
    cursor: pointer;
    font: "lato_light", Arial, sans-serif;
    color: #fff;
    padding: 12px 0 11px 0;
}

.cbp-caption-activeWrap {
    background-color: #d2d4d5;
}

.cbp-l-caption-buttonLeft, .cbp-l-caption-buttonRight {
    display: inline-block;
	padding: 2px 12px !important;
	color: #fff !important;
	font-family: "novecento_bold", Arial, sans-serif;
	text-decoration: none;
	background: #15abd2;
    margin: 5px;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	           border-radius: 4px;
	-webkit-transition: background 0.5s ease-in-out;
	    -moz-transition: background 0.5s ease-in-out;
	            transition: background 0.5s ease-in-out;
}

.cbp-l-caption-buttonLeft:hover, .cbp-l-caption-buttonRight:hover {
    color: #fff;
    text-decoration: none !important;
	background: #9fa5a7;
	-webkit-transition: background 0.5s ease-in-out;
	    -moz-transition: background 0.5s ease-in-out;
	            transition: background 0.5s ease-in-out;
}

.cbp-popup-singlePage {
    background: #d2d4d5;
    padding: 0;
}

.cbp-popup-singlePage .cbp-popup-navigation-wrap {
    height: 104px;
    background-color: #d2d4d5;
    border-bottom: 1px solid #9fa5a7;
}

.cbp-l-project-title {
    font-family: "novecento_bold", Arial, sans-serif;
    font-size: 2.143em;
    color: #15abd2;
}

.cbp-l-project-subtitle {
    color: #787878;
    font-family: "lato_light", Arial, sans-serif;
    font-size: 1.286em;
}

.cbp-l-project-desc-title {
    border-bottom: transparent;
    margin-bottom: 22px;
    color: #444;
}

.cbp-l-project-desc-title span, .cbp-l-project-details-title span {
    font-size: 1.286em;
    border-bottom: none;
    font-family: "novecento_bold", Arial, sans-serif;
}

.cbp-l-project-desc-text {
    color: #64696a;
	font-size: 1.286em;
	font-family: "lato_light", Arial, sans-serif;
}

.cbp-l-project-details-list > li, .cbp-l-project-details-list > div {
    font-family: "lato_light", Arial, sans-serif;
    font-size: 1.286em;
    color: #64696a;
    border-bottom: transparent;
}

.cbp-l-project-details-list strong {
    color: #64696a;
    font-weight: 600;
}

.cbp-l-project-details-list li img {
    line-height: 30px;
    margin-top: 5px;
    margin-right: 10px;
}

.cbp-l-project-details-title {
  border-bottom: transparent;
}

.cbp-l-project-details-visit {
    float: left;
    clear: both;
    padding: 6px 12px !important;
	color: #fff !important;
	font-family: "novecento_bold", Arial, sans-serif;
	text-decoration: none;
	background: #15abd2;
    margin: 20px 0;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	           border-radius: 4px;
	-webkit-transition: background 0.5s ease-in-out;
	    -moz-transition: background 0.5s ease-in-out;
	            transition: background 0.5s ease-in-out;
}

.cbp-l-project-details-visit:hover {
    color: #fff;
    text-decoration: none !important;
	background: #9fa5a7;
	-webkit-transition: background 0.5s ease-in-out;
	    -moz-transition: background 0.5s ease-in-out;
	            transition: background 0.5s ease-in-out;
}

.cbp-popup-singlePage-counter {
    color: #64696a;
    font-family: "lato_light", Arial, sans-serif;
    font-size: 16px;
}

.cbp-popup-loadingBox {
    width: 50px;
	height: 50px;
	border: 10px solid #15abd2;
	border-top: 10px solid rgba(0,0,0,0);
	border-left: 10px solid rgba(0,0,0,0);
	cursor: wait;
	opacity: 0.8;
	-webkit-border-radius: 50px;
	   -moz-border-radius: 50px;
	           border-radius: 50px;
    animation: spin .5s infinite linear;
}

.cbp-slider .cbp-nav {
    display: none;
}

.cbp-slider:hover .cbp-nav {
    display: block;
}

/* ==========================================================================
		3.3 - Contact
   ========================================================================== */
#mobile p, #mail p {
    line-height: 30px;
    padding-left: 38px;
}

#mobile img, #mail img {
    margin-right: 10px;
}

#mobile img {
    position: absolute;
    margin-top: -2px;
    margin-left: -35px;
}

#mail img {
    position: absolute;
    margin-top: 6px;
    margin-left: -38px;
}

#mail a, #mobile a {
    font-weight: normal;
}

/* ==========================================================================
		3.3.1 - Forms
   ========================================================================== */
form,
input,
textarea,
button {
	-webkit-appearance: none; /*Safari */
	outline: none; /* Chrome */
}

input,
textarea,
placeholder {
	font-size: 1.3125em;
	font-family: 'lato_bold', Arial, sans-serif;
}

button[type=submit] {
	margin-top: 20px;
	padding: 6px 30px;
	font-size: 1em;
}

input,
textarea {
    width: 100%;
    padding: 5px 10px;
	color: #15abd2;
	text-align: left;
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
               border-radius: 0;
	border: 1px solid #9fa5a7;
	background: #c3c6c7;
	-webkit-transition: all 0.30s ease-in-out;
	    -moz-transition: all 0.30s ease-in-out;
		        transition: all 0.30s ease-in-out;
}

input + input {
	margin-top: 10px;
}

input {
	height: 45px;
	padding-right: 34px;
}

::-webkit-input-placeholder { color: #929697; }
     input:-moz-placeholder { color: #929697; }
      :-ms-input-placeholder { color: #929697; }
           ::-moz-placeholder { color: #929697; }

textarea {
	height: 70px;
	margin: 0;
	overflow: auto;
	padding-right: 34px;
}

input[type=text]:focus,
textarea:focus {
	box-shadow: 0 0 3px #15abd2;
	border: 1px solid #15abd2;
}

input[type=file] {
	width: 400px;
}

label {
	float: left;
	color: #64696a;
	font-size: 1.000em;
	font-family: "novecento_bold", Arial, sans-serif;
	text-transform: uppercase;
}

.btn-form-active {
	background: #9fa5a7;
}

.btn-form-inactive {
	background: #15abd2;
}

.sub-title {
	display: inline-block;
	color: #15abd2;
}

.sub-title:nth-child(n+2) {
	padding: 20px 0 10px 50px;
}

/* ==========================================================================
		3.3.1 - Layout
   ========================================================================== */
.zone-form-left {
	padding-right: 10px;
}

.zone-form-right {
	padding-left: 10px;
}

.caps-blue {
	margin: 25px 0 5px 0;
}

.image-info {
	height: 20px;
	width: 20px;
	margin: 0 5px -14px 5px;
	cursor: help;
}

.g-recaptcha > div {
    display: inline-block;
}

/* ==========================================================================
		3.3.2 - Custom select
   ========================================================================== */
.s-hidden {
    visibility: hidden;
    padding-right: 70px;
}

.select {
    position: relative;
	height: 35px;
	width: 200px;
    display: inline-block;
    font: normal 1.125em 'lato_light', Arial, sans-serif;
    color: #64696a;
	border: 1px solid #9fa5a7;
    cursor: pointer;
}

.styledSelect {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	background: #c3c6c7;
    padding: 7px 10px 10px 0;
}

.styledSelect:after {
    position: absolute;
	width: 20px;
    height: 33px;
	top: 0;
    right: 6px;
    content: "";
	background: transparent url(../images/arrow@2x.png) no-repeat right center;
	background-size: 20px 20px;
}

.styledSelect:active,
.styledSelect.active {
	background: #c3c6c7;
	box-shadow: 0 0 5px #15abd2;
	border: 1px solid #15abd2;
}

.options {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin: 0 0;
    padding: 0 0;
	text-align: center;
    list-style: none;
    border: 1px solid #9fa5a7;
    background: #c3c6c7;
    display: none;
	z-index: 9999;
}

.options li {
	height: 35px;
    padding: 5px 0 0 0;
    margin: 0 0;
}

.options li:hover {
	background: #15abd2;
    color: #fff;
}


/* ==========================================================================
		3.3.3 - Tooltips
   ========================================================================== */
.tooltipster-default {
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	           border-radius: 5px;
	border: none;
	background: #15abd2;
	color: #fff;
}

.tooltipster-default .tooltipster-content {
	font-family: "lato_light", Arial, sans-serif;
	font-size: 16px;
	font-weight: 570;
	line-height: 18px;
	padding: 6px 8px;
	overflow: hidden;
	word-wrap: normal;
	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
		 -ms-hyphens: auto;
			-o-hyphens: auto;
				 hyphens: auto;
}

.tooltipster-icon {
	cursor: help;
	margin-left: 4px;
}

/* ==========================================================================
		3.3.4 - Errors
   ========================================================================== */
.message-error,
span.image-error {
	display: block;
	color: #da0f8b;
	font-size: 1em;
	line-height: 1em;
	font-family: "lato_bold", Arial, sans-serif;
	text-transform: uppercase;
}

span.image-error {
	font-size: 0.875em;
	padding-top: 2px;
	background: none;
}

p.message-error {
	padding: 20px 10px 0 10px;
}

p.message-error > img {
	vertical-align: -5px;
}

.send-wait,
.send-success,
.send-error {
	padding-top: 10px;
	font-size: 1em;
	font-family: 'novecento_bold', Arial, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	-webkit-transform: scale(1, 1.05);
       -moz-transform: scale(1, 1.05);
         -ms-transform: scale(1, 1.05);
           -o-transform: scale(1, 1.05);
               transform: scale(1, 1.05);
}

.send-wait {
	color: #15abd2;
}

.send-success {
	color: #10c926;
}

.send-error {
	color: #da0f8b;
}

.image-requis,
.image-error,
.image-ok {
	background-color: #c3c6c7;
	background-repeat: no-repeat;
	background-position: right 10px center;
}

.image-requis {
	background-image: url(../images/form-requis@2x.png);
	background-size: 20px 20px;
	-webkit-transition: background-image 0.5s ease-in-out;
		-moz-transition : background-image 0.5s ease-in-out;
	            transition: background-image 0.5s ease-in-out;
}

.image-error {
	background-image: url(../images/form-erreur@2x.png);
	background-size: 20px 20px;
	-webkit-transition: background-image 0.5s ease-in-out;
		-moz-transition : background-image 0.5s ease-in-out;
	            transition: background-image 0.5s ease-in-out;
}

.image-ok {
	background-image: url(../images/form-ok@2x.png);
	background-size: 20px 20px;
	-webkit-transition: background-image 0.5s ease-in-out;
		-moz-transition : background-image 0.5s ease-in-out;
	            transition: background-image 0.5s ease-in-out;
}

/* ==========================================================================
		3.4 - Off-canvas
   ========================================================================== */
.snap-drawer {
	width: 300px;
	padding: 15px;
	background: #15abd2;
}

.snap-drawer .caps-solo {
	float: left;
	height: 20px;
	width: 22px;
	margin: 0 5px 0 -5px;
	line-height: 1;
}

.snap-drawer .icon-date {
	float: left;
	height: 14px;
	width: 14px;
    margin-top: 3px;
	margin-right: 7px;
	line-height: 14px;
}

.snap-drawer .circle {
	position: relative;
	margin: 0 3px;
}

.snap-drawer .col-icon {
    width: 20px;
}

.circle:before,
.circle:after {
	position: absolute;
	content: '';
}

.circle,
.circle:before,
.circle:after {
	display: inline-block;
	right: 12px;
	height: 7px;
	width: 7px;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	           border-radius: 50%;
	background: #fff;
}

.circle:after {
	left: 12px;
}

/* ==========================================================================
		4 - Footer
   ========================================================================== */
#footer {
	min-height: 40px;
}

.valign-center {
	vertical-align: middle;
}

p.txtfooter {
	line-height: 15px;
	-webkit-hyphens: none;
		-moz-hyphens: none;
		  -ms-hyphens: none;
			 -o-hyphens: none;
				 hyphens: none;
}

#legal-notice {
	display: none;
}

/* ==========================================================================
		5 - Scroll up
   ========================================================================== */
.scrollToTop {
	position: fixed;
	width: 40px;
	height: 40px;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	           border-radius: 4px;
	bottom: 30px;
	right: 2%;
	background: url('../images/fleche-haut@2x.png') center no-repeat;
	background-color: #15abd2 ;
	background-size: 14px 10px;
	display: none;
	z-index: 4;
}

.scrollToTop:hover {
	background-color: #9fa5a7;
}

.no-touch .scrollToTop {
	-webkit-transition: background-color 0.5s ease-in-out;
		-moz-transition: background-color 0.5s ease-in-out;
               transition: background-color 0.5s ease-in-out;
}

.no-touch .scrollToTop:hover {
	-webkit-transition: background-color 0.5s ease-in-out;
		-moz-transition: background-color 0.5s ease-in-out;
               transition: background-color 0.5s ease-in-out;
}

/* ==========================================================================
		6 - Admin news
   ========================================================================== */
.page-admin-news .titre-page {
	color: #64696a;
	font-family: 'novecento_bold', Arial, sans-serif;
	font-size: 36px;
	text-transform: uppercase;
}

.page-admin-news .background-fixed {
	height: 150px;
}

.page-admin-news textarea {
	height: 150px;
}

.page-admin-news .edit-success {
	color: #10c926;
	font-family: 'novecento_bold', Arial, sans-serif;
	text-transform: uppercase;
}

/* ==========================================================================
		7 - Tender specifications
   ========================================================================== */
.page-cahier .titre-page {
	color: #64696a;
	font-family: 'novecento_bold', Arial, sans-serif;
	font-size: 36px;
	text-transform: uppercase;
}

.page-cahier .background-fixed {
	height: 100px;
}

/* ==========================================================================
		8 - Media queries
   ========================================================================== */

@media (max-height: 768px) {

	/* # Home
	============== */
    #content-laboite {
        top: 30px;
        width: 820px;
        height: 482px;
    }

    .tin {
        position: absolute;
        height: 482px;
        width: 272px;
        left: 22px;
    }

    .slogan {
        left: 335px;
    }

    .fst-sentence {
        top: 142px;
        font-size: 3.071em;
    }

    .snd-sentence {
        top: 142px;
        font-size: 4.571em;
    }

    .pursuit {
        left: 342px;
        top: 242px;
        font-size: 1.571em;
        letter-spacing: 0.3px;
    }

    .more {
        left: 342px;
        top: 343px;
    }

    .news-frame {
      left: 4px;
      top: 302px;
      width: 79px;
      height: 79px;
    }

    .news-qmark {
      top: 11px;
      left: 1px;
      font-size: 3.786em;
    }

}

@media (max-width: 768px) {

    /* # Home
	============== */
    #content-laboite {
        top: 30px;
        width: 700px;
        height: 416px;
    }

    .tin {
        height: 415px;
        width: 235px;
        left: 20px;
    }

    .slogan {
        left: 288px;
    }

    .fst-sentence {
        top: 124px;
        font-size: 2.643em;
    }

    .snd-sentence {
        top: 124px;
        font-size: 3.929em;
    }

    .pursuit {
        left: 294px;
        top: 205px;
        font-size: 1.429em;
        letter-spacing: -0.5px;
    }

    .more {
        left: 295px;
        top: 297px;
    }

    .news-frame {
      left: 4px;
      top: 260px;
      width: 68px;
      height: 68px;
    }

    .news-qmark {
      top: 10px;
      left: -1px;
      font-size: 3.286em;
    }

    #mobile, #mail {
        text-align: center;
    }


	/* # Content
	============== */
    article {
        padding-left: 25px;
    }

    .head h1 {
        float: none;
        font-size: 2.857em;
        text-align: center;
        margin-left: -30px;
    }

	.background-fixed {
		height: 250px;
	}

    #process .etapes:nth-child(n+2) {
        padding-top: 30px;
    }

	/* # Scroll to top
	============== */
	.scrollToTop {
		right: 5%;
	}
}

@media (max-width: 640px) {

	/* # Home
	============== */
	#content-laboite {
		width: 237px;
		height: 455px;
		left: 0;
		top: 5%;
	}

	.tin {
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	/* # Forms
	============== */
	.zone-form-left {
		padding-right: 0;
	}

	.zone-form-right {
		padding-left: 0;
	}
}

@media (max-width: 480px) {

    /* # Typography
	============== */
    h1 {
        font-size: 2.143em;
    }

	/* # Home
	============== */
	.logo {
		position: absolute;
		top: -20px;
		left: 0;
		right: 0;
		margin: auto;
	}

	.tin {
		position: absolute;
		height: 360px;
		width: 204px;
		top: -15px;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	.news-frame {
		left: 0;
		top: 258px;
		width: 58px;
		height: 58px;
	}

	.news-qmark {
		font-size: 2.800em;
	}

	#content-clients {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* # Content
	============== */
	article {
		padding: 40px 0;
	}

    #services .col:nth-child(2) {
        padding-top: 20px;
    }

    #services .row:last-child {
        margin-top: -30px;
    }

    #atouts .col:nth-child(2) {
        padding-top: 20px;
    }

    #atouts .row:last-child {
        margin-top: -30px;
    }

	/* # Portfolio
	============== */
	.portfolio .filters a {
		margin: 5px;
	}

	/* # Form
	============== */
	label {
		float: none;
		line-height: 1;
	}

	.image-info {
		margin: 0 5px -2px 5px;
		cursor: help;
	}

    #contact #btn-demande {
        margin-top: 20px;
    }

	/* # Off-canvas
	============== */
	.snap-drawer {
		width: 280px;
	}

    /* # Footer
	============== */
	#social {
		text-align: center;
	}
}