@font-face {
    font-family: 'gotham_boldregular';
    src: url('fonts/gotham_bold-webfont.eot');
    src: url('fonts/gotham_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gotham_bold-webfont.woff2') format('woff2'),
         url('fonts/gotham_bold-webfont.woff') format('woff'),
         url('fonts/gotham_bold-webfont.ttf') format('truetype'),
         url('fonts/gotham_bold-webfont.svg#gotham_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gotham_bookregular';
    src: url('fonts/gotham-book-webfont.eot');
    src: url('fonts/gotham-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gotham-book-webfont.woff2') format('woff2'),
         url('fonts/gotham-book-webfont.woff') format('woff'),
         url('fonts/gotham-book-webfont.ttf') format('truetype'),
         url('fonts/gotham-book-webfont.svg#gotham_bookregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sansbold';
    src: url('fonts/opensans-bold-webfont.eot');
    src: url('fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-bold-webfont.woff') format('woff'),
         url('fonts/opensans-bold-webfont.ttf') format('truetype'),
         url('fonts/opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/opensans-regular-webfont.eot');
    src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-regular-webfont.woff') format('woff'),
         url('fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
  border: 0;padding:0;margin:0;font-family: 'open_sansregular';
}

a:active,
a:hover {
  outline: 0;
}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

body{
font-family: 'open_sansregular';font-size:20px;padding:0;color:#666666;
}
h1, h2, h3, h4 {
    margin-bottom:0;
    margin-top: 0;
	font-weight:normal;
}
a:hover{text-decoration:none;}
#page{width:100%}
.container {position:relative;margin:auto;width:1040px;}
.left{float:left}
.right{float:right}
.clear{clear:both;}

/****/
#logo{
background:url(images/wefan.png) no-repeat;background-size:100%;width:225px;height:182px;text-indent:-9999px;margin: 105px 0 0 -5px;
}

.language { position: absolute; top: 35px; right: 0; }

#top{
background:url(images/visuel-to.jpg) center top;
height:460px;
background-size:cover;
color:#ffffff;
}
#top h1{font-size:26px;text-transform:uppercase;width:620px;margin-top:40px;font-family: 'gotham_bookregular';}
#phone1{
background:url(images/tel1.png) center top;
height:577px;width:290px;margin-top: -360px;
}
.lang-en #phone1 { background:url(images/tel1-en.png) center top; }

.bande{height:550px;overflow:hidden}
#bande2{height:250px;overflow:visible}
.bande-grise{background:#ededeb}

#phone2{
background:url(images/tel2.jpg) center top;
height:930px;width:319px;margin-top: -60px;
}
.lang-en #phone2 { background:url(images/tel2-en.png) center top; }

#phone3{
background:url(images/tel3.jpg) center top no-repeat;
height:446px;width:847px;margin: 40px -120px 0 0;
}
.lang-en #phone3 { background:url(images/tel3-en.jpg) center top no-repeat; }
#phone4{
background:url(images/tel4.jpg) center top;
height:491px;width:491px;margin: 70px 0px;
}
.lang-en #phone4 { background:url(images/tel4-en.png) center top; }
h3{font-size:26px;color:#0a7851;text-transform:uppercase;font-family: 'gotham_bookregular';}
h3 strong{font-family: 'gotham_boldregular';}
.bloc-texte{width:500px;text-align:center}
.bloc-texte p{}
#inscription{background:url(images/bg-email.jpg) center top;
background-size:cover;
color:#ffffff;text-align:center;}
#inscription h2{text-transform:uppercase;font-size:60px;font-family: 'gotham_boldregular';}
#inscription h3{color:#ffffff;font-size:26px;font-family: 'gotham_bookregular';}

#bande2 h2{font-size:20px;/*width:280px;*/    width: 485px;margin-right:50px}
#bande2 span{font-size:14px;color:#009966;text-transform:uppercase;}
#bande2 .left{padding-top:68px;}

.lang-en #bande2 h2 { width: 260px; }

#bande3 .bloc-texte{padding-top:65px;width:550px;}
#bande4 .bloc-texte{padding-top:118px;}
#bande5 .bloc-texte{padding-top:80px;}

#bande3 img,#bande4 img{margin:38px auto;}

#zooms{width:440px;margin:30px auto;}
#inscription .container{padding-top:130px;}
#inscription h2,#inscription h3{margin-bottom:20px;}
#mail{width:255px;}
#mail,#validation{font-family: 'open_sansbold';width:116px;color:#ffffff;background: rgb(0, 0, 0);
background: transparent;
background: rgba(0, 0, 0, 0.5);/* FF3+,Saf3+,Opera 10.10+,Chrome,IE9*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);/*IE 5.5-7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000)";/*IE8*/
zoom: 1;border:2px solid #ffffff;text-align:center;padding:16px 5px;font-size:14px;}
#mail{width:255px;}
#validation{cursor:pointer;}

#register_form{margin-bottom:20px;}
#inscription h4,#inscription a{text-transform:uppercase;font-size:14px;font-family: 'open_sansbold';color:#ffffff;text-decoration:none;}

#inscription a:hover{text-decoration:underline;}
.icone-social{background: rgb(0, 0, 0);
background: transparent;
background: rgba(0, 0, 0, 0.5);/* FF3+,Saf3+,Opera 10.10+,Chrome,IE9*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);/*IE 5.5-7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000)";/*IE8*/
zoom: 1;border:2px solid #ffffff;width:42px;height:42px;-moz-border-radius: 42px;/*Firefox*/
-webkit-border-radius: 42px;/*Safari, Chrome*/
border-radius: 42px;display:inline-block;margin:10px 5px;}

#validation:hover,.icone-social:hover{background:#0a9361;}

#ico_fb{background:url(images/facebook.png) center top;width:14px;height:22px;display:block;margin:10px auto;}
#ico_tw{background:url(images/twitter.png) center top;width:22px;height:20px;display:block;margin:10px auto;}
#ico_insta{background:url(images/instagram.png) center top;width:23px;height:24px;display:block;margin:8px auto;}

.appstore{margin-top:-5px}
/*********Media queries***********/
@media (max-width: 1580px) {
#phone3{margin: 40px -200px 0 0;}
}
@media (max-width: 1365px) {
#phone3{margin: 40px -320px 0 0;}
}

@media (max-width: 1100px) {
.container {width: 920px;}
#phone3{margin: 40px -430px 0 0;}
#phone4 {margin: 70px 0 70px -50px;}
#bande5 .bloc-texte{width:420px;}
#top h1 {width: 560px;}
#phone1 {
    margin-top: -540px;
    margin-bottom: 30px;
}
#bande2 .left{
   float:none;
}
.appstore {
    margin-top: -45px;
}
}
@media (max-width: 991px) {
#page{overflow:hidden;}
.container {width:660px;}
#phone1 {
    margin-top: -560px;
    margin-right: -120px;
}
.appstore {
    margin-top: 5px;
}
#bande2 h2 {
    width: 405px;
}
#logo {
    margin: 46px 0 0 -5px;
}

#top h1 {
    width: 350px;
}

#bande2 .left{float:none;padding-top:40px;}

#phone2 {
    margin-left: -90px;
}
.bloc-texte {
    width: 380px;
}

.bloc-texte img{
    width:100%;
}
#bande3 .bloc-texte {
    padding-top: 65px;
    width: 360px;
}
#bande3 .bloc-texte img{margin: 38px auto 11px;}

#bande4 .bloc-texte {
    padding-top: 100px;
}

#phone3 {
    margin: 40px -455px 0 0;
}

#phone4 {
    margin: 70px 0 70px -250px;
}
.bloc-texte #zooms{width:100%}
#zooms .left,#zooms .right{width:46%}
#zooms .left img,#zooms .right img{width:100%}
#bande5 .bloc-texte {
    width:350px
}
}

@media (max-width: 767px) {
.container {width:555px;}
#top h1 {
    width: 240px;margin-top: 20px;
}

#bande2 h2 {
    margin-right: 50px;
    width: 260px;
}
#bande2 .appstore {
    padding-top: 20px;
}
#phone2 {
    margin-left: -102px;
}
#bande3 .bloc-texte {
    padding-top: 60px;
    width: 290px;
}
.bloc-texte {
    width: 310px;
}
#bande3 img, #bande4 img {
    margin: 30px auto;
}

#bande4 .bloc-texte {
    padding-top: 67px;
}
#phone3 {
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin: 80px -355px 0 0;
    width: 600px;
}

#phone4{
    background-repeat: no-repeat;
    background-size: 100%;
    width:430px;
	margin: 50px 0 70px -250px;
}
body {
    font-size: 20px;
}
#bande4,#bande5{height: 480px;}
}

@media (max-width: 640px) {
.container {width:400px;}

#phone1 {
    margin-right: -170px;
    margin-top: -560px;
}

#phone2{
    background-repeat: no-repeat;
    background-size: 100%;
    width:240px;margin-left: -142px;
}
h3 {
    font-size: 22px;
}
.bande {
    height: 490px;
}
#bande4 .bloc-texte {
    width:100%
}
#phone3 {
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin: 20px -85px 0 0;
    width: 600px;
}
#bande4{
    height: 620px;
}


#bande5 .bloc-texte {
    position: relative;
    width: 100%;
}
#bande5 {
    height: 820px;
}
#phone4 {
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin: 470px 0 70px -12px;
    position: absolute;
    width: 105%;
    z-index: 0;
}

#inscription h2 {
    font-size: 50px;
}
#inscription .container {
    padding-top: 90px;
}

#logo {
    background-size: 100% auto;
    margin: 46px 0 0 -5px;
    width: 170px;height: 140px;
}
#top h1 {
    font-size: 22px;
    width: 180px;
}

#phone1 {
    background-repeat: no-repeat !important;
    background-size: 100% auto !important;
    height: 520px;
    margin-right:0px;
    margin-top:0px;
	position: absolute;
    top: -390px;
    right: -100px;
    width: 210px;
}

#top {
    height: 410px;
}
#bande2 h2 {
    font-size: 19px;
    margin-right: 0px;
    width:100%;
}
#bande2 {
    height: auto;
    overflow: visible;
    padding-bottom: 40px;
}
}

@media (max-width: 460px) {
.container {width:90%;}
#phone2 {
display:none;
}

#bande3 .bloc-texte {
    padding-top: 60px;
    width: 100%;
}

#inscription h2 {
    font-size: 40px;
}
#inscription .container {
    padding-top: 90px;
}

#mail{
    width: 85%;margin:auto
}
#validation{margin-top:10px;width: auto;padding-left:30px;padding-right:30px}

#inscription .container {
    padding-top: 60px;
}
#phone1 {
    right: -120px;
	top: -370px;
    width: 200px;
}

.language { top: 10px; }

}
/***ie7***/
.ie7 #navbar .navbar-nav .menu  {
    height: 45px !important;
}
