@charset "utf-8";
div.menu table, table.siteoffer, table.siteoffer2 {
	border-collapse: collapse
}
a, div.menu a, div.sn a {
	text-decoration: none
}
* {
	margin: 0;
	padding: 0
}
body {
	font-family: Raleway, sans-serif
}
div.top {
	width: 100%;
	height: 400px;
	background: url(images/office-1209640_19206.jpg) center -220px no-repeat fixed;
	background-size: 100%
}
.center {
	width: 100%;
	margin: auto;
	min-height: 1200px;
	color: #8c8c8c;
	line-height: 200%;
	font-size: 18px
}
.center .biggest {
	width: 100%;
	float: left;
	min-height: 50px;
	border-bottom: solid thin #d4d4d4;
	margin-bottom:30px;
}
.center .insidebiggest {
	width: 100%;
	max-width: 1200px;
	margin: auto
}
.center .littlesquare {
	width: 33%;
	float: left;
	margin: 30px 0
}
.center .littlesquare .imgtc .filter {
	position: absolute;
	width: 0;
	height: 0;
	background: 0 0;
	transition: .3s
}
.center .littlesquare .imgtc:hover .filter {
	width: 350px;
	height: 233px;
	background: url(images/plusdetails.png) rgba(255,255,255,.5);
	transition: .3s
}
.center .littlesquarehost {
	width: 23%;
	min-height: 300px;
	float: left;
	margin: 30px 10px
}
.center .littlesquarehost table.siteoffer td {
	padding-left: 10px
}
.center .littlesquare a {
	text-decoration: none;
	color: #32bea6
}
.center .biggest2 {
	width: 100%;
	float: left;
	min-height: 250px;
	background: url(images/office-1209640_1920.jpg) center bottom fixed;
	padding-bottom: 20px
}
.center .biggest2 p {
	color: #fff;
	font-size: 2em;
	text-align: justify;
	font-weight: 700
}
.center .biggest3 p {
	float: left
}
.center .biggest p {
	clear: both
}
.center .biggest3 {
	width: 100%;
	float: left;
	min-height: 50px;
	background: #b7d073;
	color: #fff;
	font-size: 2em
}
.center .biggest3 input[type=text] {
	width: 250px;
	height: 30px;
	float: right;
	margin-top: 5px
}
.center .biggest3 input[type=button] {
	width: 80px;
	height: 32px;
	background: #45AA2A;
	border: none;
	color: #fff;
	font-family: Gudea, sans-serif;
	font-size: 20px;
	float: right;
	margin-top: 5px
}
.littleleft
{
	float:left;
	width:49%;
	height:300px;
	overflow: auto;
}
.littleleft img
{
	width:100%;
}
.littleright
{
	float:right;
	width:49%;
	height:300px;
}
div.menu table.mb2 tr {
	background: rgba(251,251,251,0.95);
	color: #474747;
}
.remplirlevide {
	float: left;
	width: 100%;
	min-height: 500px
}
table.testsquare {
	width: 100%;
	margin-bottom: 50px
}
table.testsquare td.imgcell {
	width: 30%
}
table.testsquare img {
	width: 100%;
	max-width: 400px
}
input[type=text], select {
	width: 90%;
	max-width: 400px;
	font-family: Raleway, sans-serif;
	border: thin solid #8c8c8c;
	height: 30px
}
textarea {
	width: 100%;
	max-width: 500px;
	min-height: 300px
}
div.menu {
	width: 100%;
	color: #ffffff;
	float: left;
	z-index: 40;
	transition: .4s;
	position:fixed;
}

.sticky {
	background: rgba(251,251,251,0.95);
	border-bottom: solid thin #747474;
	color: #474747;
	height: 60px;
	transition:.4s;
	position:fixed;
}
.sticky .mb 
{
	color: #474747;
}
.sticky .logo
{
	width:70px;
}
div.menu .content {
	width: 1200px;
	margin: auto;
}
div.menu .content2 {
	width: 780px;
	float: right
}
div.menu .content .mb, div.menu .content .mb2 {
	float: left;
	height: 60px;
	overflow: hidden;
	text-align: center;
	z-index: 40;
}
div.menu .content .mb {
	width: 130px
}
div.menu .content .mb2 {
	width: 230px;
	margin-left: -50px
}
div.menu .content .mb table td {
	height: 30px;
	border-bottom: solid thin #d4d4d4
}
div.menu .content .mb:hover {
	overflow: visible
}
div.menu a {
	color: inherit
}
div.menu table {
	width: 100%;
	float: right
}
div.menu table td.ftd {
	background: 0 0;
	font-size: 12px;
	height: 80px
}
div.menu table td.ftd strong {
	height: 40px;
	padding-top: 20px
}
div.menu strong {
	width: 100%;
	height: 40px;
	transition: .6s;
	padding: 10px 0 0;
	display: block;
	text-align: center
}
div.menu table td:hover strong {
	color: #FFF;
	transition: .4s
}
div.menu table td:hover {
	background: #0c910c;
	transition: .4s
}
.menu b {
	font-style: normal;
	font-size: 10px
}
a img {
	border: none
}
div.top img.logo2 {
	display: none
}
div.sometext {
	float: right;
	width: 100%;
	height: 200px;
	margin-top: 150px;
	overflow: hidden;
	text-align: center
}
div.container {
	width: 100%;
	float: left;
	color: #FFF;
	text-shadow: 3px 3px 5px #000
}
div.container .text {
	width: 100%;
	height: 200px;
	margin: auto;
	font-size: 24px;
	max-width: 1200px;
	color: #ececec
}
div.container .text b {
	color: #b7d073
}
div.container .text .flle {
	float: left
}
div.clients {
	width: 100%;
	min-height: 150px;
	background: #f1f1f1;
	padding-top: 40px
}
div.newsletter {
	width: 100%;
	min-height: 70px;
	padding-top: 30px;
	padding-bottom: 20px
}
div.firstcta {
	width: 100%;
	height: 160px;
	background: url(images/beard-2286440_1920.jpg) bottom no-repeat fixed;
	text-align: center;
	color: #fff;
	font-size: 56px;
	padding-top: 60px;
	font-weight: 700
}
div.firstcta strong.boutcta {
	margin: 40px auto auto;
	float: none;
	display: inline
}
h1, h2, h3, h4, h5, h6 {
	color: #1b961b;
	clear: both
}
.commandebout .boutcta {
	margin: auto auto 10px;
	width: 40%;
	float: none;
	display: block;
	text-align: center;
	border-radius: 3px;
	text-indent: 0;
	border: none
}
strong.boutcta {
	padding: 20px 50px;
	float: right;
	background: #a7c35c;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-shadow: none;
	border: thin solid #a7c35c;
	transition: .2s
}
strong.boutcta:hover {
	background: #1b961b;
	color: #fff;
	transition: .2s
}
div.bottom {
	width: 100%;
	min-height: 80px;
	float: left;
	background: #000;
	color: #FFF;
	font-size: 12px
}
div.bottom .content {
	width: 100%;
	max-width: 1200px;
	margin: auto
}
strong.blogicon, strong.blogicon:hover, strong.fbicon, strong.fbicon:hover, strong.plusicon, strong.plusicon:hover, strong.twicon, strong.twicon:hover, strong.instaicon, strong.instaicon:hover  {
	width: 48px;
	height: 48px;
	float: right
}
img.mobilemenuicon {
	display: none
}
img.centerimg {
	display: block;
	margin: auto;
	transform: rotate(-360deg);
	transition: transform .4s
}
img.centerimg:hover {
	transform: rotate(360deg);
	transition: transform .2s
}
strong.blogicon {
	display: block;
	background: url(images/blogger2.png) -48px
}
strong.blogicon:hover {
	display: block;
	background: url(images/blogger2.png) 0
}
strong.fbicon {
	display: block;
	background: url(images/facebook2.png) -48px
}
strong.fbicon:hover {
	display: block;
	background: url(images/facebook2.png) 0
}
strong.twicon {
	display: block;
	background: url(images/twitter2.png) -48px
}
strong.twicon:hover {
	display: block;
	background: url(images/twitter2.png) 0
}
strong.instaicon {
	display: block;
	background: url(images/instaicon2.png) -48px
}
strong.instaicon:hover {
	display: block;
	background: url(images/instaicon2.png) 0
}
.leftpart, .placeoffer, .rightpart, .titleoffer, .visueloffer, div.sn, img.logo, table.steps {
	float: left
}
.menu table.mobile {
	display: none
}
table.centerthis {
	margin: auto
}
.menumobile {
	z-index: 10;
	position: absolute
}
@media screen and (max-width: 800px) {
	div.top {
		height: 200px;
		background-position: 0 0
	}
	div.top .sometext {
		display: none
	}
	div.top img.logo2 {
		margin: auto;
		display: block;
		padding-top: 35px
	}
	img.mobilemenuicon {
		display: inline
	}
	div.menu {
		background: 0 0;
		height: 35px
	}
	.menu div.content2, .menu img.logo, .menu table.desktop {
		display: none
	}
	.menu table.mobile {
		display: block;
		float: left;
		position: absolute;
		text-align: left
	}
	.menu table.mobile strong {
		text-align: left
	}
	.menumobile {
		width: 100%;
		height: 35px;
		overflow: hidden;
		float: left;
		background: rgba(0,0,0,.6)
	}
	.menu table.mobile td {
		background: 0 0;
		width: 200px
	}
	.center .littlesquare {
		width: 100%;
		float: left
	}
	.center .littlesquarehost {
		width: 90%;
		float: left
	}
	img.clientreflogo {
		width: 40%
	}
	div.sn, table.steps {
		width: 100%
	}
	div.sn {
		float: left
	}
	.littleleft{
	float:left;
	width:100%;
	height:300px;
	overflow: auto;
}
.littleright{
	float:right;
	width:100%;
	height:300px;
}

}
table.siteoffer {
	width: 90%;
	max-width: 300px;
	background: rgba(0,0,0,.6);
	color: #fff;
	margin: auto
}
table.siteoffer th {
	border: none
}
table.siteoffer td {
	height: 40px;
	border-bottom: #8c8c8c solid thin
}
table.siteoffer .pricetd {
	text-align: center;
	background-color: #000;
	font-weight: 700;
	font-size: 22px
}
table.siteoffer .commandtd {
	text-align: center;
	background: #1b961b;
	color: #fff;
	font-weight: 700
}
table.siteoffer .commandtd strong {
	display: block;
	width: 100%;
	height: 40px;
	padding-top: 15px
}
table.siteoffer .commandtd a {
	color: #fff
}
table.siteoffer2 {
	width: 90%;
	max-width: 390px;
	background: rgba(0,0,0,.6);
	color: #fff;
	float: left;
	margin-left: 10px;
	margin-bottom: 20px
}
table.siteoffer2 th {
	border: none
}
table.siteoffer2 td {
	height: 40px;
	border-bottom: #8c8c8c solid thin;
	padding-left: 10px
}
table.siteoffer2 .pricetd {
	text-align: center;
	background-color: #000;
	font-weight: 700;
	font-size: 22px
}
table.siteoffer2 .commandtd {
	text-align: center;
	background: #1b961b;
	color: #fff;
	font-weight: 700
}
strong.boutondemo, table.prix tr:hover {
	background: #32bea6;
	color: #fff
}
table.siteoffer2 .commandtd strong {
	display: block;
	width: 100%;
	height: 40px;
	padding-top: 15px
}
table.siteoffer2 .commandtd a {
	color: #fff
}
table.steps {
	width: 100%;
	height: 500px;
	max-width: 190px;
	margin-left: 5px;
	font-size: 14px
}
table.steps td {
	text-align: justify;
	vertical-align: top
}
table.steps th {
	border: none
}
table.prix, table.prix td, th {
	border: thin solid #324a6e;
	border-collapse: collapse
}
img.logo {
	width:120px;
	transition:.4s;
}
img.clientreflogo {
	margin: 30px 15px
}
img.siteref
{
	width:100%;
}
div.sn {
	width: 24%;
	min-height: 180px;
	margin-left: 5px
}
div.sn a {
	color: #fff
}
li {
	list-style: inside
}
iframe, table.prix {
	width: 100%
}
table.prix td, th {
	height: 30px;
	padding-left: 10px
}
.errorpage {
	width: 100%;
	height: 100%;
	font-size: 40px;
	color: #fff
}
.errorpage img {
	position: absolute;
	width: 100%;
	z-index: -1
}
strong.boutondemo {
	width: 100%;
	height: 40px;
	font-size: 24px;
	display: block;
	text-align: center
}
.placeoffer {
	width: 100%
}
.leftpart {
	width: 30%;
	min-width: 300px
}
.rightpart {
	width: 70%;
	min-width: 500px
}
.priceoffer {
	float: right;
	font-size: 34px;
	font-weight: 700
}
.promessoffer, .videoffer {
	float: left
}
.videoffer {
	width: 100%;
	height: 60px
}
.ctaoffer {
	float: right
}
.nosvaleurs {
	float: left;
	height: 150px
}
.rondelle {
	float: left;
	width: 128px;
	height: 60px
}
.nosvaleurs:hover .textvaleur, .textvaleur {
	float: left;
	height: auto;
	transition: margin .4s
}
.textvaleur {
	width: 0;
	margin-left: -100%;
	overflow: hidden
}
.nosvaleurs:hover .textvaleur {
	width: calc(100% - 130px);
	margin-left: 0;
	overflow: auto
}
div.correct { text-align:center; background:#a3ffb8; color:#00ad11; font-size:24px; padding:20px 20px 20px 20px; border:solid thin #00ad11; border-radius:5px; }
div.wrong { text-align:center; background:#ff9999; color:#9b0000; font-size:14px; padding:20px 20px 20px 20px; border:solid thin #9b0000; border-radius:5px;}
div.alert { text-align:center; background:#ffb28f; color:#ff5100; font-size:14px; padding:20px 0 20px 0; border:solid thin #9b0000; border-radius:5px;}