/* ---------------------- GENERAL */

html{
	font-family: roboto-light;
}

a{
	text-decoration: none;
}

@font-face {
    font-family: "Agencyr";
    src: url('Agencyr.ttf');
}

@font-face {
    font-family: "roboto-light";
    src: url('Roboto-light.ttf');
}

.roboto-regular{
font-family:roboto-light;
}

@font-face {
    font-family: "roboto-bold";
    src: url('Roboto-regular.ttf');
}

.container{
	margin: 0 auto;
	width: 1200px;
}

.container-bloc{
	padding-top: 80px;
	margin: 0 auto;
	width: 1200px;
}

ul{
	list-style: none;
}

.left{
	float: left;
}

.right{
	float:right;
}

.center{
	text-align: center;
}

.text-left{
	text-align: left;
}

.text-right{
	text-align: right;
}

.underline{
	height: 10px;
	border-top: 1px solid #000000;
}

h2{
	font-weight: bold;
	color: #2D2C2C;
	font-size: 35px;
}

.black{
	color:#000000;
}

h3{
	font-size: 25px;
}

h4{
	font-size: 20px;
}

.clearboth_5{
	clear: both;
	height: 5px;
}

.clearboth_3{
	clear: both;
	height: 3px;
}

.clearboth_10{
	clear: both;
	height: 10px;
}

.clearboth_20{
	clear: both;
	height: 20px;
}

.clearboth_50{
	clear: both;
	height: 50px;
}

.clearboth_60{
	clear: both;
	height: 60px;
}

.clearboth_80{
	clear: both;
	height: 80px;
}


/* ---------------------- HEADER */

header{
	padding-top: 10px;
	height: 40px;
	width: 100%;
	background-color: #FFFFFF;
	position: fixed;
	z-index: 100;
	border-bottom: 1px solid rgb(169, 169, 169);
}

header ul{
	padding-top: 5px;
}

header ul li{
	float:left;
	width: 200px;
	font-family: roboto-bold;
	margin-left: 20px;
}

header ul li:last-of-type{
	width: 150px;
}

header ul li a{
	color:black;
	font-style: italic;
	font-size: 18px;
}

.title{
	color: white;
	float: left;
	font-family: Agencyr;
	padding: 7px;
	font-size: 35px;
}

.width-185{width:185px;}
.width-170{width:170px;}
.width-142{width:142px;}
.width-70{width:70px;}
.width-60{width:60px;}

/* ---------------------- COUVERTURE */

#couverture{
  background: url(../images/couverture.jpg) no-repeat;
  background-attachment: fixed !important;
  background-size: cover;
  min-height: 750px;
}

#iphones-couv{
  height: 630px;
  position: absolute;
  margin: 60px 0px
}

#logo-couv{
  margin: 200px auto 0;
  width: 370px;
}

.lightbox form input{
  padding: 10px;
  width: 300px;
  font-family: roboto-light;
}

.lightbox form input[type='submit']{
	background-color: #1c7194;
	width: 100px;
	padding: 12px;
  	margin-left: 15px;
	cursor: pointer;
	color:white;
	border: none;
}

.download-android {
  float: left;
  background: url(../images/googleplay_inactive.png) no-repeat scroll 0 0 transparent;
  color: #FFFFFF;
  display: block;
  height: 61px;
  line-height: 1.5em;
  background-size: 177px 61px;
  cursor: pointer;
  text-decoration: none;
  width: 177px;
}

.download-android:hover {
  float: left;
  background: url(../images/googleplay_active.png) no-repeat scroll 0 0 transparent;
  color: #FFFFFF;
  display: block;
  height: 61px;
  line-height: 1.5em;
  background-size: 177px 61px;
  cursor: pointer;
  text-decoration: none;
  width: 177px;
}

.download-apple {
  background: url(../images/appstore_inactive.png) no-repeat scroll 0 0 transparent;
  color: #FFFFFF;
  float: right;
  display: block;
  height: 61px;
  line-height: 1.5em;
  background-size: 177px 61px;
  cursor: pointer;
  text-decoration: none;
  width: 177px;
}

.download-apple:hover {
  float: right;
  background: url(../images/appstore_active.png) no-repeat scroll 0 0 transparent;
  color: #FFFFFF;
  display: block;
  height: 61px;
  line-height: 1.5em;
  background-size: 177px 61px;
  cursor: pointer;
  text-decoration: none;
  width: 177px;
}

/* ---------------------- DESCRIPTION */

#description{
	background-color: #f3f3f3;
	height: 460px;
}

#description #liste-haute li{
	float: left;
	width: 200px;
	text-align: center;
	padding: 4.1% 4.1% 0% 4.1%;
	color: #1c7194;
}

#description #liste-basse{
	padding-left: 6%;
}

#description #liste-basse li{
	float: left;
	width: 200px;
	text-align: center;
	padding: 4.1% 0% 0% 10%;
}

#explication-logo{
	height:400px;
	display: none;
}

#titre-explication-logo{
	color:#1C7194;
	padding: 4% 2%;
}

.div-logo-explication{
	padding-left: 13%;
	font-style: italic;
}

#retour{
  height: 25px;
  cursor: pointer;
  padding-top: 13px;
  width: 100px;
  float:right;
  background-color: rgba(75, 75, 75, 0.95);
  text-align: center;
  color: white;
  font-size: 13px;
  border: none;
}

#textes-usager-rejoindre{
display:none;
}

#textes-reseau-rejoindre{
display:none;
}

.icone{
	cursor: pointer;
	transform:scale(0.8);
}

.icone:hover{
	cursor: pointer;
	transform:scale(1.0);
}

/* ---------------------- EXPLICATION */

#explication{
	background-color: #d6d8dc;
	background: url(../images/fond-application.png);
 	background-size: cover;
	height:620px;
}

#main-iphone{
  float: left;
  margin: 0 auto;
  background: url(../images/main.png) no-repeat center;
  background-size: 100%;
  width: 400px;
  height: 492px;
  margin-left: 115px;
}

#ordi{
  float: left;
  margin: 0 auto;
  background: url(../images/mac.png) no-repeat center;
  background-size: 100%;
  width: 550px;
  height: 420px;
  margin-left: 60px;
}

#ecran-mac{
  height: 262px;
  margin: 62px 65px;
}

#ecran-iphone{
  height: 345px;
  margin: 115px 125px;
}

.fonction-appli{
  padding-top: 25px;
  width: 260px;
  opacity: 0.15;
  padding-bottom: 15px;
}

.fonction-ordi{
  padding-top: 25px;
  width: 260px;
  opacity: 0.15;
  padding-bottom: 25px;
}

.fonction-appli h3{
	font-family: roboto-bold;
	font-size: 28px;
}

.fonction-ordi h3{
	font-size: 30px;
}

#fonction-alerte{
	opacity: 1;
}

#fonction-moderer{
	opacity: 1;
}

.choix-animation{
	cursor: pointer;
	opacity: 0.15;
	font-size: 20px;
}

#separateur{
	opacity: 0.15;
	font-size: 25px;
}

.active{
	opacity: 1;
	color:#1C7194;
}

#reseau-transport{
	display: none;
}

#parralaxe-bottom{
  background: url(../images/bas.jpg);
  background-attachment: fixed !important;
  background-size: cover;
  min-height: 400px;
}

/* ---------------------- REJOINDRE */

.choix-rejoindre-container{
  width: 38%;
  padding-left: 6%;
  padding-right: 6%;
}

#pricing-table{
  display: none;
}
#rejoindre{
	background-color: #f3f3f3;
	height:650px;
}

#rejoindre #liste-icons li {
  float: left;
  width: 300px;
  text-align: center;
  padding: 4.1%;
  color: #1c7194;
}

#rejoindre #liste-choix li{
  float: left;
  text-align: center;
  width: 275px;
  padding: 0 5.2%;
  font-size: 20px;
  opacity: 0.4;
  cursor: pointer;
}

#rejoindre #liste-choix li:hover{
	opacity: 1;
}

.numero{
	font-weight: bold;
}

.label{
	float: left;
	padding-top: 15px;
	width: 180px;
}

#rejoindre form input[type='text'], #rejoindre form input[type='email']{
	padding: 10px;
	width: 64%;
  	font-family: roboto-light;
}

#rejoindre form input[type='checkbox']{
	margin-right:20px;
  	float: left;
}

#rejoindre form input[type='submit']{
	background-color: #1c7194;
	width: 100px;
	height: 38px;
	cursor: pointer;
	color:white;
	border: none;
}

#bp-tarifs{
	float:left;
	color:#000000;
	font-style:italic;
}

#bp-tarifs:hover{
	text-decoration:underline;
}

#bp-tarifs img{
	vertical-align:middle;
	padding-right:10px;
}

.annuler,.retour-choix{
  height: 25px;
  cursor: pointer;
  margin-right: 50px;
  padding-top: 13px;
  width: 100px;
  float: left;
  background-color: rgba(75, 75, 75, 0.95);
  text-align: center;
  color: white;
  font-size: 13px;
  border: none;
}


#remarque-api{
	width: 320px;
	max-width: 320px;
	max-height: 60px;
	height: 60px;
}

#questions{
	width: 500px;
	max-width: 500px;
	height: 180px;
	max-height: 180px;
}

.form-left{
	float: left;
	width: 500px;
}

.form-right{
	float: right;
	width: 500px;
}

#formulaire-choix1{
	display: none;
}

#formulaire-choix2{
	display: none;
}

#formulaire-choix3{
	display: none;
}

/* ---------------------- CONTACT */

#contact{
	background-color: #f3f3f3;
	height: 520px;
}

#contact form{
	width: 450px;
}

#contact form input{
  padding: 10px;
  width: 100%;
  font-family: roboto-light;
}

#contact form textarea{
  padding: 10px;
  width: 100%;
  font-family: roboto-light;
  height: 100px;
}

#contact form input[type='submit']{
  background-color: #FFFFFF;
  width: 100px;
  cursor: pointer;
  color: #000000;
  border: 1px solid rgb(169, 169, 169);
}

#map-canvas{
	height: 311px;
	width: 450px;
}


/* ---------------------- FOOTER */

footer{
	height:70px;
	background-color: white;
}

footer .left li{
	float: left;
	width: 200px;
}

footer a{
	color: black;
}

footer .right li{
	float: left;
	margin-left: 30px;
}

/* ------ FANCYBOX */


			@media all {
				.lightbox { display: none; }
				.fl-page h1,
				.fl-page h3,
				.fl-page h4 {
					font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif;
					font-weight: 100;
					letter-spacing: 1px;
				}
				.fl-page h1 { font-size: 110px; margin-bottom: 0.5em; }
				.fl-page h1 i { font-style: normal; color: #ddd; }
				.fl-page h1 span { font-size: 30px; color: #333;}
				.fl-page h3 { text-align: right; }
				.fl-page h3 { font-size: 15px; }
				.fl-page h4 { font-size: 2em; }
				.fl-page .jumbotron { margin-top: 2em; }
				.fl-page .doc { margin: 2em 0;}
				.fl-page .btn-download { float: right; }
				.fl-page .btn-default { vertical-align: bottom; }

				.fl-page .btn-lg span { font-size: 0.7em; }
				.fl-page .footer { margin-top: 3em; color: #aaa; font-size: 0.9em;}
				.fl-page .footer a { color: #999; text-decoration: none; margin-right: 0.75em;}
				.fl-page .github { margin: 2em 0; }
				.fl-page .github a { vertical-align: top; }
				.fl-page .marketing a { color: #999; }

				/* override default feather style... */
				.fixwidth {
					background: rgba(256,256,256, 0.8);
				}
				.fixwidth .featherlight-content {
					width: 500px;
					padding: 25px;
					color: #fff;
					background: #111;
				}
				.fixwidth .featherlight-close {
					color: #fff;
					background: #333;
				}

			}
			@media(max-width: 768px){
				.fl-page h1 span { display: block; }
				.fl-page .btn-download { float: none; margin-bottom: 1em; }
			}
			
			@media(max-width: 1024px){			
				body{
					min-width:1400px;
				}
			}

/* ------------- PRICING COLLUM */

.mode-transport .align-span{
	vertical-align: super;
	margin-left: 15px;
}

.collum{
	width: 40%;
	padding-top: 0.5%;
}

.collum-large{
	width: 100%;
	padding-top: 0.5%;
}

.super-align{
	vertical-align: super;
}

.sub-align{
	vertical-align: sub;
}

.left-45{
	margin-left: 45px;
}

.name{
	width: 50px;
	padding-left: 5px;
}

table tr{
	height: 46px;
}

.liste-services li{
	float: left;
  	width: 180px;
}

#devis{
	display: none;
}

#formulaire-devis{
	background-color: #FFFFFF;
	height: 470px;
}

#formulaire-devis form{
	padding-left: 30px;
  	padding-right: 30px;
}

#questions-devis {
  width: 500px;
  max-width: 500px;
  height: 58px;
  max-height: 58px;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.btn-custom {
  color: #bdc3c7;
  font-size: 18px;
  border: 1px solid #bdc3c7;
}
.btn-custom:hover {
  color: #ffffff;
  border: 1px solid #ffffff;
}
#pricing-table {
  padding-top: 50px;
}
#pricing-table .pricing {
  marign: 0;
  padding: 0;
  font-family: 'Robot', sans-serif;
}
#pricing-table .pricing .pricing-table {
  padding-bottom: 30px;
}
#pricing-table .pricing .pricing-table .pricing-header {
  position: relative;
  background: #1C7194;
  padding: 22px 22px;
  text-align: center;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
#pricing-table .pricing .pricing-table .pricing-header .pricing-title {
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 24px;
  text-align: center;
  font-weight: 700;
}
#pricing-table .pricing .pricing-table .pricing-header .pricing-rate {
  font-size: 70px;
  font-weight: 700;
  color: #ffffff;
  position: relative;
  text-align: center;
}
#pricing-table .pricing .pricing-table .pricing-header .pricing-rate sup {
  font-size: 24px;
  position: relative;
  top: -30px;
  color: #bdc3c7;
}
#pricing-table .pricing .pricing-table .pricing-header .pricing-rate span {
  font-size: 16px;
  color: #bdc3c7;
  text-transform: uppercase;
}
#pricing-table .pricing .pricing-list {
  padding: 20px 0 40px 0;
  background: #ffffff;
  border: 1px solid #e3e3e3;
}
#pricing-table .pricing .pricing-list ul {
  padding: 0px;
  display: table;
  margin: 0px auto;
}
#pricing-table .pricing .pricing-list ul li {
  list-style: none;
  color: #bdc3c7;
  font-size: 16px;
  line-height: 42px;
}
#pricing-table .pricing .pricing-list ul li:last-child {
  border: none;
}
#pricing-table .pricing .pricing-list ul li i {
  margin-right: 12px;
  color: #bdc3c7;
}
#pricing-table .pricing .pricing-list ul li span {
  color: #34495e;
  padding-left: 10px;
  vertical-align: super;
}