/* CSS Document */


body,html {border:0; margin:0; padding:0; height:100%; width:100%; font-family:Oswald ; font-weight:300;color:#404040}





div {vertical-align:top; display:block;}
/* entire container, keeps perspective */
.full {width:100%; display:block; height:100%; margin:0; padding:0; background:url(../img/bgphoto1.jpg) center center no-repeat fixed; background-size:cover; vertical-align:top; min-width:1100px}
.flip-container {	perspective: 1000; display:block; position:absolute; top:40%; left:50%; width:304px; height:604px; margin-left:-152px; margin-top:-165px;}
.flip-container:hover .flipper, .flip-container.hover .flipper {		transform: rotateY(180deg);	}
.flip-container, .front, .back {	width: 304px;	height: 304px;}
.flipper {	transition: 0.6s;	transform-style: preserve-3d;	position: relative; width: 304px;	height: 304px;}
.front, .back {	backface-visibility: hidden;	position: absolute;	top: 0;	left: 0;}
.front {	z-index: 2;	transform: rotateY(0deg);}
.back {	transform: rotateY(180deg);}


.logoBig { display:block; margin:7% auto 10px auto; opacity:0}

.boxLogin {display:block; position:relative; width:100%; text-align:center; margin-top:60px;}
.boxLogin input.light { background:url(../img/white30.png) repeat; border:1px #fff solid; text-transform:uppercase; padding:10px 10px; display: inline-block; line-height:20px; width:60%; font-weight:400; text-transform:uppercase; font-family:Oswald; color:#fff; border-top-left-radius:4px; border-bottom-left-radius:4px  }
.btOutlineWhite{ cursor:pointer; display:  inline-block; padding:10px 12px; background:url(../img/white10.png) repeat; border:1px #fff solid; text-align:center; line-height:20px; text-transform:uppercase;   font-weight:300; color:#fff; letter-spacing:1px; font-family:Oswald; border-left:0; border-top-right-radius:4px; border-bottom-right-radius:4px}
.btOutlineWhite:hover {background-color:#fff; color:#222222; outline: none}

.boxLogin input.light:focus{background:url(../img/white50.png) repeat; outline: none}
.btOutlineWhite:focus{outline: none}



::-webkit-input-placeholder { color:#fff; font-weight:300 }
::-moz-placeholder { color:#fff; font-weight:300 } /* firefox 19+ */
:-ms-input-placeholder { color:#fff; font-weight:300 } /* ie */
input:-moz-placeholder { color:#fff; font-weight:300 }

.container80 {display:block;padding:30px;}
.leftMenu{display: inline-block; width:24%; min-height:100%; background:#444444; color:#fff; }
.campagne_detail hr{border:0; border-bottom:1px solid #868686; margin:10px 0 0 0}
.campagne_detail h2 { margin: 0 0 10px 0; font-size:14.5px; font-weight:300; line-height:14px; padding:6px; background-color:#5c5c5c; text-transform:uppercase; display: inline-block}
.logoClient {display:block; margin:0 0 25px 0; max-width:90%}
.campagne_detail p {font-size:14px; line-height:14px; display:block; margin:10px 0}
.campagne_detail p i{font-size:16px; line-height:14px; display:inline-block; margin-right:4px}

.leftMenu .btOutlineWhite {border-radius:0; font-size:11px; padding:6px 8px;  margin:3px 0; line-height:14px;   border:0px #fff solid; text-decoration:none; text-align:left}
.leftMenu .btOutlineWhiteActive {background-color:#fff; color:#222; outline: none}

.leftMenu .btOutlineWhite small {line-height:12px; font-size:9px; color:#eee}
.leftMenu .btOutlineWhiteActive small, .btOutlineWhite:hover small{color:#555}
p.info {font-size:12px; line-height:15px !important; font-style: normal; letter-spacing:0; display:block; margin: 8px 0; color:#ddd}

.logoBottom {position:absolute; bottom:20px; left:27%; max-width:40% !important; opacity:0.5}
.logoBottom:hover {opacity:1}

.previewer { display: inline-block; background:#434343; height:100%; width:76%; min-width:360px}
.previewer iframe { width:100%; }

.viewActive {color:#A5D3E2}

.mobView {max-width:470px;}

.btOutlineWhite, .boxLogin input , a
{-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }

.previewer, .logoBottom  
{-webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; }



.anim-x {animation: slideX .6s both;}


@keyframes slideX {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }
}

.anim-y {
  animation: slideUp .6s both;
}

.anim-y:nth-child(2) {
  animation-delay: 0.28s;
}

.anim-y:nth-child(3) {
  animation-delay: 0.80s;
}

.anim-y:nth-child(4) {
  animation-delay: 0.120s;
}

.anim-y:nth-child(5) {
  animation-delay: 0.7s;
}

.anim-y:nth-child(6) {
  animation-delay: 0.84s;
}

.anim-y:nth-child(7) {
  animation-delay: 0.98s;
}

.anim-y:nth-child(8) {
  animation-delay: 1.12s;
}

.anim-y:nth-child(9) {
  animation-delay: 1.26s;
}

.anim-y:nth-child(10) {
  animation-delay: 1.4s;
}


.anim-y:nth-child(11) {
  animation-delay: 1.54s;
}


@keyframes slideUp {
  0% {
    transform: translateY(76px) scale(0.92);
    opacity: 0;
  }
}


h1 {font-family: 'Roboto Condensed', sans-serif; font-weight:700; letter-spacing:-1px; font-size:40px; color:#33548b; line-height:44px; text-align:center}
h1 strong {color:#000000; font-size:45px;}
.d* {text-align:center !important}
h2 {font-size:18px}
form {margin:0}
#getting-started {font-family: 'Roboto Condensed'; text-align:center; font-size:18px}


@media (max-width: 880px) {
	
.bloc-40, .bloc-60, .bloc-50 , .bloc-33 , .bloc-67 {display:block; width:auto}
.show680 {display:none}
div.topContainer {display: flex;  flex-direction:column  ;}
#topBan {max-height:300px; min-height:300px}
.topContainer {min-height:300px}

div.topContainer, div.blocsContainer {display: flex;  flex-direction:column ;}
.blocsContainer .bloc-33 {width:100%}

.borderRight {border-right:0px solid #f2f3f2; margin-right:0;} 
.inner {display:block; padding:20px}
.content {border-radius:0; margin:auto}

.logo {max-width: 70%;}

nav, .hide {display:none !important}
.present * {text-align:center !important}
.logos img {display: inline-block; margin:10px ; height:70px}
ul li {    padding: 0 0 10px 0;}
ul li i {display:none !important}
.flexContCol {display:block;  flex-direction:unset !important}

}


@media (max-width: 680px) {
.bloc-40, .bloc-60, .bloc-50 , .bloc-33 , .bloc-67, .blog-50, .blog-33 {display:block; width:auto; margin-right:0}
.ban {display:none}
.banMobile {display:block !important;}
.show680 {display:block}

}