Fallagassrini Bypass Shell

*{
	padding:0;margin:0;box-sizing:border-box; outline:none; -webkit-font-variant-ligatures: no-common-ligatures!important; font-variant-ligatures: no-common-ligatures!important;
}

/* ---------------------------------------------------------------------------------------------------- FONTS ---------------------------------------------------------------------------------------------------- */

@font-face {
    font-family: 'open-b';
    src: url('fonts/opensans-bold_0-webfont.woff2') format('woff2'),
         url('fonts/opensans-bold_0-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open-i';
    src: url('fonts/opensans-italic-webfont.woff2') format('woff2'),
         url('fonts/opensans-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open-l';
    src: url('fonts/opensans-light-webfont.woff2') format('woff2'),
         url('fonts/opensans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open';
    src: url('fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('fonts/opensans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open-sb';
    src: url('fonts/opensans-semibold-webfont.woff2') format('woff2'),
         url('fonts/opensans-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.open {font-family:'open'!important; font-weight:normal; font-style:normal;}
.open-l {font-family:'open-l'!important; font-weight:normal; font-style:normal;}
.open-b {font-family:'open-b'!important; font-weight:normal; font-style:normal;}
.open-sb {font-family:'open-sb'!important; font-weight:normal; font-style:normal;}
.open-i {font-family:'open-i'!important; font-weight:normal; font-style:normal;}

.font10 {font-size:10px!important;} 
.font11 {font-size:11px!important;} 
.font12 {font-size:12px!important;} 
.font13 {font-size:13px!important;} 
.font14 {font-size:14px!important;} 
.font15 {font-size:15px!important;} 
.font16 {font-size:16px!important;} 
.font17 {font-size:17px!important;} 
.font18 {font-size:18px!important;} 
.font19 {font-size:19px!important;} 
.font20 {font-size:20px!important;} 
.font22 {font-size:22px!important;} 
.font24 {font-size:24px!important;} 
.font26 {font-size:26px!important;} 
.font28 {font-size:28px!important;} 
.font30 {font-size:30px!important;} 
.font32 {font-size:32px!important;} 
.font34 {font-size:34px!important;} 
.font36 {font-size:36px!important;} 
.font40 {font-size:40px!important;} 
.font44 {font-size:44px!important;} 
.font48 {font-size:48px!important;} 
.font50 {font-size:50px!important;}  
.font60 {font-size:60px!important;} 
.font70 {font-size:70px!important;} 
.font80 {font-size:80px!important;} 
.font85 {font-size:85px!important;} 


/* ---------------------------------------------------------------------------------------------------- PARAMETRES GENERAUX ---------------------------------------------------------------------------------------------------- */
 
section,header,footer,figure,article,aside,nav,main {display:block;} 

button {border:none; background:none; cursor:pointer;}
a,a *,button,button *{-webkit-transition:all .25s ease;transition:all .25s ease; color:inherit; text-decoration:none; cursor:pointer; outline:0;} 
a img {border:0;} 
a:hover, button:hover {color:#ff6400;}
img, svg {vertical-align:middle; border:none;}
ul,li {list-style-type:none;} 
b, strong {font-family:'open-b'!important; font-weight:normal!important;}

div, p {font:14px 'open'; line-height:24px; text-align:left; color:#464646;} 
p.font18 {font:18px 'open'; line-height:28px;}

textarea {overflow:auto; resize:none;}
input,textarea {outline:0;}
input[type=submit] {cursor:pointer;}

h1, h2, h3 {display:inline-block; width:100%; font:normal 45px 'open-l'; vertical-align:middle; line-height:55px; padding:0 0px; color:#fff;}
h1.font36 {font-size:36px; line-height:48px;}
h2 {font:normal 35px 'open-l'; line-height:45px; margin-bottom:30px; color:#fff;}
h3 {font:normal 24px 'open'; line-height:24px; margin-bottom:0px; color:#464646;}

.middle {vertical-align:middle;}
.bottom {vertical-align:bottom;}
.right {text-align:right;}
.center {text-align:center;}
.justify {text-align:justify;}
.left {text-align:left;}

.letter100 {letter-spacing:.1em;}
.letter200 {letter-spacing:.2em;}

.img-responsive {
  display: block;
  width: 100%;
  height: auto;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  z-index:5;
  position:relative;
  width:940px;
}
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  float:left;
}
.col-12 {
  width: 100%;
}
.col-11 {
  width: 91.66666667%;
}
.col-10 {
  width: 83.33333333%;
}
.col-9 {
  width: 75%;
}
.col-8 {
  width: 66.66666667%;
}
.col-7 {
  width: 58.33333333%;
}
.col-6 {
  width: 50%;
}
.col-5 {
  width: 41.66666667%;
}
.col-4 {
  width: 33.33333333%;
}
.col-3 {
  width: 25%;
}
.col-2 {
  width: 16.66666667%;
}
.col-1 {
  width: 8.33333333%;
}
.col-offset-12 {
  margin-left: 100%;
}
.col-offset-11 {
  margin-left: 91.66666667%;
}
.col-offset-10 {
  margin-left: 83.33333333%;
}
.col-offset-9 {
  margin-left: 75%;
}
.col-offset-8 {
  margin-left: 66.66666667%;
}
.col-offset-7 {
  margin-left: 58.33333333%;
}
.col-offset-6 {
  margin-left: 50%;
}
.col-offset-5 {
  margin-left: 41.66666667%;
}
.col-offset-4 {
  margin-left: 33.33333333%;
}
.col-offset-3 {
  margin-left: 25%;
}
.col-offset-2 {
  margin-left: 16.66666667%;
}
.col-offset-1 {
  margin-left: 8.33333333%;
}
.col-offset-0 {
  margin-left: 0%;
}


/* ---------------------------------------------------------------------------------------------------- ELEMENTS GLOBAUX ---------------------------------------------------------------------------------------------------- */

.bouton {display:inline-block; position:relative; width:auto; height:45px; font:14px 'open'; line-height:45px; border:none; text-decoration:none; border-radius:5px; color:#fff; text-align:center; padding:0px 20px; background:#ea6927;}
.bouton.big {height:65px; padding:0px 40px; font-size:16px; line-height:65px;}
.bouton.border {background:#ff6400; border-bottom:solid 3px #bd4b00;}

.bouton:hover {background:#c84504; color:#fff;}
.bouton.border:hover {background:#e55c00; border-bottom:solid 3px #a34100; color:#fff;}

.underline {text-decoration:underline;}

.placeholder {color:#fff; opacity:1;} 
::-webkit-input-placeholder	{color:#fff; opacity:1;} 
::-moz-placeholder {color:#fff; opacity:1;}
::-ms-placeholder {color:#fff; opacity:1;}
::-ms-input-placeholder	{color:#fff; opacity:1;}
:-ms-input-placeholder	{color:#fff; opacity:1;}


/* ---------------------------------------------------------------------------------------------------- COULEURS ---------------------------------------------------------------------------------------------------- */

.blanc {color:#fff; fill:#fff;} 
.orange {color:#ff6400; fill:#ff6400;}
.orange.alt {color:#ea6927; fill:#ea6927;}
.noir {color:#464646; fill:#464646;}
.gris {color:#969696; fill:#969696;}
.gris-clair {color:#8f8b8a; fill:#8f8b8a;}

.bgblanc {background:#fff;} 
.bgorange {background:#ff6400;} 
.bgorange.alt {background:#ea6927;}
.bggris {background:#969696;}
.bgnoir {background:#464646;}

/* ---------------------------------------------------------------------------------------------------- PAGE D'ACCUEIL ------------------------------------------------------------------------------------------*/

html {width:100%; height:100%;}
body {width:100%; height:100%; min-width:940px; overflow-x:hidden; min-height:850px;}
body.accueil-commun {background:url('images/background-commun.jpg') no-repeat 50% 50% fixed; background-size:cover;}

body.accueil-commun>.container {height:100%;}
body.accueil-commun>.container>.row {position:absolute; top:0; bottom:0; margin:auto; left:0; right:0; height:850px;}
#logo-home svg {width:100%; height:auto;}
#titre-accueil-double {line-height:36px; margin-top:40px;}

.bloc-site {padding-top:75px; border-radius:10px; margin-top:90px; height:390px; position:relative;}
.bloc-site .row>p.font30 {margin-bottom:10px;}
.bloc-site>span.bgorange {display:block; width:90px; height:90px; line-height:90px; position:absolute; top:-45px; left:0; right:0; margin:auto; text-align:center; border-radius:50%;}
.bloc-site>span.bgorange svg * {fill:#fff;}
.bloc-site>.bouton {width:190px; position:absolute; bottom:-20px; left:0; right:0; position:absolute; margin:auto;}
.bloc-site .logo-happy-pay {max-width:95px;}
.bloc-site .logo-happy-r {max-width:125px;}


/* ---------------------------------------------------------------------------------------------------- PAGE HAPPY & PAY ONE PAGE ------------------------------------------------------------------------------------------*/

body.accueil-happy-pay {background:url('images/background-home-happy-n-pay.jpg') no-repeat 50% 50% fixed; background-size:cover;}
body.accueil-happy-pay>.container#slide1 {height:100%; z-index:100;}
#logo-happy-pay {height:110px; line-height:110px;}
#logo-happy-pay svg {vertical-align:bottom;}
#menu {height:70px; line-height:70px; border-bottom:dashed 1px rgba(255,255,255,.25); margin-top:40px; padding:0px; margin-right:15px; margin-left:-15px;}
#menu li {display:inline-block; margin-left:40px; color:rgba(255,255,255,.4); position:relative;}
#menu li:after {content:''; display:inline-block; width:10px; height:5px; border-radius:5px 5px 0 0; position:absolute; left:0; right:0; bottom:0; margin:auto; background:#ff6400; opacity:0; transition:all .25s ease;}
#menu li:hover:after {opacity:1;}
#menu li:hover a {color:rgba(255,255,255,1);}
#menu li.active a {color:rgba(255,255,255,1);}
#menu li.active:after {opacity:1;}

.titre-one-page {height:140px; position:absolute; top:-150px; bottom:0; margin:auto; left:0; right:0;}
.titre-one-page span {display:block;}

#bloc-bottom-home {padding:80px; padding-bottom:45px; position:absolute; bottom:-20px; box-shadow:0px 0px 10px 0px rgba(0,0,0,.3); left:0; right:0; border-radius:10px;}
#bloc-bottom-home>.rond {width:340px; height:180px; line-height:180px; border-radius:170px 170px 0 0 / 170px 170px 0 0; position:absolute; top:-80px; left:0; right:0; margin:auto; z-index:1;}
#bloc-bottom-home>.rond svg {width:165px; height:auto;}
#bloc-bottom-home>p {position:relative; z-index:2; margin-bottom:20px; line-height:30px;}
#bloc-bottom-home>p:last-child {margin-bottom:0;}

#slide2,#slide3,#slide4,#slide5 {float:left; position:relative; z-index:10; width:100%; background-position:center center; background-repeat:no-repeat; background-size:cover;}

#slide2 {padding:85px 0 105px 0; background-image:url('images/background-comment-ca-marche.jpg');}
#slide2 .col-4 {margin-top:20px;}
#slide2 .col-4 svg {margin-bottom:15px; width:30px; height:auto;}

#slide3 {padding:120px 0 140px 0; background-image:url('images/background-nos-plus.jpg');}
#slide3 ul {line-height:30px;}
#slide3 h2 svg {margin-bottom:15px; width:30px; height:auto;} #slide3 h2 svg * {fill:#fff;}

#slide4 {padding:100px 0; background-image:url('images/background-tarifs.jpg');}
#slide4 p.col-4 {margin-top:45px; line-height:30px; color:#fff;}
#slide4 p.col-4  svg {margin-bottom:15px;}
#slide4 p.col-4  svg * {fill:rgba(255,255,255,.4);}

#slide5 {background:#f5f5f5; padding:100px 0;}
#slide5>span.bgorange {width:90px; line-height:90px; display:block; border-radius:50%; margin:auto; position:absolute; top:-45px; left:0; right:0;}
#slide5>span.bgorange svg * {fill:#fff;}
.question {float:left; max-height:94px; border-bottom:dashed 1px #ff6400; position:relative; overflow:hidden; transition:all .5s ease-out;}
.question:first-child {border-top:dashed 1px #ff6400;}
.question>header {line-height:88px; height:92px;}
.question>p {transition:all .5s ease-out; opacity:0;}
.question>button {width:15px; height:15px; display:inline-block; position:absolute; margin:auto; top:0; bottom:0; right:0;}
.question>button svg {transition:all .5s ease;}

.question.open {max-height:400px; transition:all .5s ease-in;}
.question.open>p {opacity:1; margin-bottom:30px;}
.question.open>button svg {transform:rotate(180deg);}

body>footer {padding:40px 0 30px 0; float:left; width:100%;}
body>footer p.col-9 {line-height:19px; color:#787878;}
.logo-paiement {width:398px;}
.logo-footer {max-width:120px;}

/* ------ ASSISTANCE ------- */

#bloc-assistance {width:200px; height:100px;position:fixed; top:100px; right:-170px; background:#313131; z-index:1000; line-height:100px; overflow:hidden; border-radius:10px 0px 0px 10px; transition:all .45s ease;}
#bloc-assistance.open {right:0px;}
#bloc-assistance>* {display:inline-block; vertical-align:middle;}
#bloc-assistance>button {width:30px; height:100px; background:none; border:none; text-align:center; cursor:pointer;}
#bloc-assistance>p {width:170px; border-left:solid 1px #848484; color:#fff; padding:0px 10px; line-height:14px;}
#bloc-assistance>p>a {background:#ff7000; display:inline-block; height:24px; line-height:24px; color:#fff; padding:0px 20px; margin-top:7px; border-radius:15px;}

/* PAGE ASSISTANCE */

body.accueil-happy-pay>.container#slide1.assistance {height:auto!important; z-index:100;}

.assist {margin-top:30px;}
h1.assist {padding-bottom:30px; border-bottom:solid 1px rgba(255,255,255,.1); margin-top:60px;}
h1.contact {padding-bottom:30px; margin-top:60px;}
.form-assistance {
	width:100%; text-align:right; margin-bottom:100px; margin-top:70px!important;
}
.form-assistance>input[type=text], .form-assistance>textarea {
	width:100%; height:50px; background:#ff6400; margin-bottom:3px; border:none; border-radius:5px; padding-left:20px; font:14px 'open'; color:#fff; transition:all .25s ease;
}
.form-assistance>textarea {
	height:200px; padding-top:13px;
}
.form-assistance>input[type=text]:focus, .form-assistance>textarea:focus {
	background:#d75400;
}
.form-assistance>input[type=submit] {
	margin:0px; border:none; transition:all .25s ease; margin-top:5px; box-shadow:none;
}

.fb-like {position:absolute!important; top:0px; right:15px; box-shadow:0px 3px 5px rgba(0,0,0,.35);}