@import url(header.css);

html, body {height: 100%;	margin:0; padding:0;}
body {background-color:#ffffff; font-family:Roboto,tahoma; font-size:100%; text-align:center; position:relative; display:table; width:100%;}
.back {height:540px;width:100%;background-image:url(/img/travel/background.jpg); background-repeat:no-repeat; background-position:center; background-size: cover;}

.main {margin:0; padding:10px 0;}
.textes {transition: all 1.2s ease-in-out;}
.textes:hover {transform: scale(1.05);}
h1 {margin:100px 0 0; font-size:2.5em; line-height:1.4em; color:#ffffff; text-shadow:2px 2px 3px #323232;}
.th1 {font-size:2.0em; line-height:1em; color:#ffffff; text-shadow:2px 2px 3px #323232;}

.boutons {margin-top:30px;}
.register {margin-right:15px;padding:12px 40px; display:inline-block; text-align:center; cursor:pointer; border-radius:3px; border:1px solid transparent; font-size:19px; color:#ffffff; background-color:#e69412; transition: background-color 0.8s ease, color 0.8s ease;}
.register:hover {background-color: #5dc638;}
.demo {margin-left:15px;padding:12px 40px; display:inline-block; text-align:center; cursor:pointer; border-radius:3px; border:1px solid transparent; font-size:19px; color:#ffffff; background-color:#3185bc; transition: background-color 0.8s ease, color 0.8s ease;}
.demo:hover {background-color: #5dc638;}

.cadre1 {background:#0063a4; margin:auto; margin-top:160px; padding:20px 0 30px;}
.cadre1-txt {margin-bottom:20px; font-size:24px; color:#ffffff;}
.logos {width:845px; height:44px; margin:auto; background-image:url(/img/logos-loueurs.png); background-repeat:no-repeat;}

.cadre2 {width:100%; max-width:950px; display:table; margin:auto; margin:70px auto; border:0px solid red;}
.cadre2:hover {background:#fcfcfc;}
.cadre2-g {float:left; display:inline-block;}
.cadre2-d {float:right; display:inline-block;}

.encadre {max-width:450px; display:table; margin-bottom:30px; text-align:left; border:0px solid blue;}
.img-a {width:48px; height:48px; background:url(/img/travel/img-a1.jpg); margin:auto; float:left; margin-right:13px;}
.img-b {width:40px; height:40px; background:url(/img/travel/img-b.jpg); margin:auto; float:left; margin-right:18px;}
.img-c {width:40px; height:40px; background:url(/img/travel/img-c.jpg); margin:auto; float:left; margin-right:18px;}
.img-d {width:40px; height:40px; background:url(/img/travel/img-d.jpg); margin:auto; float:left; margin-right:18px;}
.img-e {width:40px; height:40px; background:url(/img/travel/img-e.jpg); margin:auto; float:left; margin-right:18px;}
.img-f {width:40px; height:40px; background:url(/img/travel/img-f.jpg); margin:auto; float:left; margin-right:18px;}

.cadre-txt {float:right; display:inline-block; max-width:380px;}
.cadre-tit {margin:3px 0 7px; font-size:16px; color:#2e4282; font-weight:bold;}
.cadre-txt p {margin:0; font-size:18px; color:#5d7db4;}

.clear {clear:both;}

.cadre3 {margin: auto; padding:60px 0; background:rgba(54, 91, 156, 0.80); transition: all 1.0s ease-in-out;}
.cadre3:hover {background: rgba(54, 91, 156, 0.9);}
.cadre3-1 {padding:0 5%; max-width:600px; margin:auto; text-align:left;}

.cadre3 .titre {margin:0; padding-bottom:15px; font-size:30px; color:#ffffff; font-weight:bold;}
.cadre3 .txt {margin-bottom:24px; font-size:18px; color:#fff;}

.cadre3 .line {padding:10px 0; border:0px solid white;}
.cadre3 .tit {display:inline-block; width:210px; margin-bottom:5px; font-size:20px; color:#fde4b8; padding-right:12px; text-align:right;}
.cadre3 .tit2 {width:70px;padding-left:50px;}
.cadre3 .tit3 {position:relative;bottom:30px;}

textarea {padding:7px 0 7px 10px; height:86px; width:370px; border: 1px solid #CCCCCC; border-radius:4px; font-family:Inherit; font-size:18px; color:#2d83b3;}
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}

.inp {
  padding:7px 0 7px 10px; width:370px; height:38px; background-color: #FFFFFF; font-family:Roboto,tahoma; font-size:18px; color:#2d83b3; line-height:28px;
  border: 1px solid #CCCCCC; border-radius: 4px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset; -webkit-appearance: menulist-button;  
}
.inp:hover {box-shadow: 0px 0px 1px #66afe9; color: #2d83b3;}

.btn {
	width:370px; display:inline-block; box-shadow:inset 0px 1px 0px 0px #fed897; padding:10px 0;  margin-top:10px;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
	background:-moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6b33d', endColorstr='#d29105');
	background-color:#f6b33d;	border-radius:5px; border:1px solid #eda933;  cursor:pointer;
	color:#ffffff; font-family:Roboto,tahoma; font-size:24px;	
	text-decoration:none;	text-align:center;	text-shadow:1px 1px 0px #cd8a15;
}

.btn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d29105), color-stop(1, #f6b33d) );
	background:-moz-linear-gradient( center top, #d29105 5%, #f6b33d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d29105', endColorstr='#f6b33d');
	background-color:#d29105;
}

.footer {bottom:0;right:0;left:0;background-color:#ffffff;}
.footer p {margin:3px 0;}
.footer .box1 {margin:0;  background-color:#f5f5f5; padding: 1rem; font-size:14px; color:#4e4b45; border-top:1px #bababa solid;}
.footer .box2 {padding:10px; border-top:1px #dadada solid;}
.footer a{font-size:14px; color:#798ce2; line-height:25px; padding-right:20px;}
.footer a:hover{color:#975515;}
.footer .cb {padding-left:20px;}


@media screen and (max-width: 868px) {

  .header, .logos, .th1 {display:none;}
  
  .titre {margin:20px 0; font-size:2.4em;}
  .back {height:430px;}
  h1 {width:90%; margin:30px auto; font-size:1.8em; line-height:1.2em;}
  .register, .demo {margin:15px auto; width:250px;}
  .encadre {width:95%; margin:20px auto 0;}
  
  .th1 {margin:2px auto; font-size:1.7em; line-height:1.2em; max-width:90%;}
  .cadre1 {margin-top:50px;}
  .cadre1-txt {width:90%;max-width:470px;margin:auto;}
  .cadre2 {width:100%; margin:30px auto; }
  .cadre2-g, .cadre2-d {float:none; display:block; margin:auto;}
  .cadre3 {padding:20px 0;}
 
  .cadre3 .tit {display:block; padding-right:0; text-align:left;}
  .cadre3 .tit2 {padding:10px 0 0 0;}
  .cadre3 .tit3 {position:relative; top:0px;}

  .cadre-txt {max-width:calc(90% - 40px);}

}