/* Use:
https://cssminifier.com/
*/
@charset "utf-8";
/*@import url('https://fonts.googleapis.com/css?family=Nunito:400,900&display=swap');*/

*{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}ins{background-color:#ff9;color:#000;text-decoration:none}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
a,p,div,span, h1, h2, h3, input {font-family: 'Nunito', sans-serif; font-size:24px; line-height:36px; color:#3d2559; -webkit-tap-highlight-color: transparent;}
p {max-width:1300px}
.clear {clear:both}
.no_margin_top {margin-top:0px}

h1, h2, h3, p {margin:0 100px;}
header a {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
h1, h2 {font-size:80px; line-height: 80px;margin-top: 90px;}

h3{font-size:36px; line-height: 36px; 
  position: relative;
  display: inline-block;
	padding-bottom:35px; margin-bottom:20px; margin-top:90px;
	text-decoration: none;
	background:
	radial-gradient(farthest-side, #ee3e52 98%,transparent 100%) bottom right/10px 10px,
	radial-gradient(farthest-side, #fcc23d 98%,transparent 100%) bottom left /10px 10px,
	linear-gradient(to right,#fcc23d,#ee3e52) bottom/calc(100% - 10px) 10px;
	background-repeat:no-repeat;	
	}
.button_big, input[type=button], input[type=submit] {display:inline-block; border-radius: 45px; padding: 0 50px; height:90px; background-image: linear-gradient(to right, #fcc23d , #ee3e52); color:#fff;line-height: 90px; font-family: 'Nunito', sans-serif;font-size:30px; margin-top: 90px; margin-left:100px; border: none; cursor: pointer; outline: none;}

.button_big2 {
  position: relative;
  border: 10px solid transparent;
  border-radius: 45px;
  background-color: #fff;
  background-clip: padding-box;
  padding: 0 50px;
  height: 70px;
  display: inline-block;
  line-height: 70px;
  font-family: 'Nunito', sans-serif;font-size:30px;
  margin-top: 90px;
  margin-left:100px;
}

.button_big2::after {
    position: absolute;
    top: -10px; bottom: -10px;
    left: -10px; right: -10px;
    background: linear-gradient(to top, #fcc23d, #ee3e52);
    content: '';
    z-index: -1;
    border-radius: 45px;
}
.hr {height:10px; background: linear-gradient(to right, #fcc23d, #ee3e52);border-radius: 5px;}

input[type=text], input[type=password] {border: 1px solid #3d2559; color:#3d2559;  border-radius: 30px;  font-size:18px;    font-size: 18px;
    display: block;
    margin-left: 100px;
    margin-top: 50px;
    height: 60px;
    width: 400px;
    padding: 0 0 0 30px;
	outline: none;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}
input[type=text]:focus, input[type=password]:focus {box-shadow: 0 0 10px #8535a7; border: 1px solid #8535a7; }

header {padding:0 100px; height:170px;    width: -webkit-fill-available;width: -moz-available; position:absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    }
header a {font-family: 'Nunito', sans-serif;}
header .logo {line-height: unset;}
header .logo img { width:200px; height:auto;}
nav {float:left;}
nav a {padding-left:100px; }
header .loginsignup {
  margin-left: auto;
  display: flex;
  gap: 20px;
  flex-direction: row-reverse;
  align-items: center;
}
header .login {float:right; position:relative; margin-right:50px}
header .loginsignup .signup {
  display:block; border-radius: 25px; padding: 0 30px; height:50px; background-image: linear-gradient(to right, #8535a7 , #dd1f77); color:#fff;line-height: 50px;
}
.bg_menu, .hamburger {display: none;}
.bg_menu.menu_open {
  display: block;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
main {border-radius: 0 0 90px 90px; background-color: #fff; margin-bottom: -90px; position:relative; z-index:1; padding-bottom:100px; min-height:calc(100vh - 490px); padding-top:170px}
main.hp{
	background-image: url(/img/hp_illustration_3.png), url(/img/hp_illustration_2.png), url(/img/hp_illustration_1.png), url(/img/hp_illustration_0.jpg);  
	/* background-position: calc(54vw) calc(32vh), calc(65vw) calc(20vh), calc(54vw) calc(24vh), top right;   */
  background-position:calc(54vw) calc(32vh), calc(65vw) calc(20vh), calc(54vw) calc(24vh), right calc(0vh);
	background-repeat: no-repeat;
}
main .banner {height:calc(100vh);padding:0 100px;}
main .banner h1 {top: calc(15vh); position:relative; margin:0; font-weight:900}
main .banner h1 span {font-size:30px;display: block; font-weight:400}
main .banner p {top: calc(20vh); position: relative; margin:0}
main .banner .button_big {top: calc(25vh); position: relative; margin:0px;}
p.hightlight {margin-top:60px; font-size:30px}
p.hightlight a{font-size:30px; color:#e55396; text-wrap: nowrap;}
.prices, .column {
  box-sizing: border-box;
}
.prices {
  border-radius: 90px 90px 0 0;margin-top:100px; background-image: linear-gradient(to right, #fcc23d , #ee3e52); position:relative; 
  padding:50px; 
  display: flex;
  padding-bottom: 120px; 
}
.prices .column { padding:50px;
  width: 33.33%;
}
.prices:after {content: ""; display: table; clear: both;}

.prices .column .tile .label {background: linear-gradient(to right, #fcc23d , #ee3e52); color:#fff; height: 90px; float: left; width: 70%; text-align: center; line-height: 90px; font-weight: 900; font-size: 30px; margin-left: -50px; position: relative;}
.prices .column .tile .label img {position: absolute; right: 0;}
.prices .column .tile .tarif {font-family: 'Nunito', sans-serif; font-size:60px; padding-top: 20px; font-weight: 900;}
.prices .column .tile .tarif sup {font-size:30px;vertical-align: super;}
.prices .column .tile .period {padding-top: 20px; display: block;}

.prices .column .tile {border-radius: 60px; background:#fff;  padding: 50px;overflow: hidden; text-align:center}
.prices .column .tile .price{ text-align: right; padding-right: 30px;}
.prices .column .tile .hr {margin: 30px 0;}
.prices .column .tile ul {list-style-type: none;    text-align: center; font-size:20px; margin: 45px 0;}
.prices .column .tile ul span{color:#e55396; font-size:20px;}
.prices .column .tile .button_big {width: -webkit-fill-available; width: -moz-available; text-align: center; margin:0px;}
.prices .column .tile .ft {background-image: linear-gradient(to right, #8535a7 , #dd1f77)}

.rounded_bottom { height:90px; border-radius: 90px 90px 0 0; background-color: #fff; position: relative; top: -90px;}
form p {font-size:18px; margin-top:50px; line-height: 24px;}
form a {color:#e55396; font-size:18px; line-height: 24px;}
form input[type=submit] {margin-top:50px; width:430px}

.static {margin: 90px 100px 0 100px}
.static p{margin:30px 0;}
.static h3 {background: none; margin-left: 0; margin-top: 50px; padding: 0;}


footer {background-image: linear-gradient(to right, #8535a7 , #dd1f77);width:auto; height:490px; position: sticky; bottom: 0; z-index: 0;}
footer .logo_footer { width:200px; height:auto; margin-top: -25px; top: 290px; left: 100px; position: relative; float: left;}
footer .links {float:left;top: 290px; position: relative;margin-top: -18px; left: 100px;}
footer .links a {padding-left:100px; font-family: 'Nunito', sans-serif; color:#fff}
footer .social {float:right; position:relative; margin-right:100px;top: 290px;margin-top: -25px;}
footer .social img{width:50px; height:50px; margin-right:30px}

@media (max-width:1500px){
  header .login {margin-right: 30px}
  nav a {padding-left: 50px;}
  .prices {padding: 30px 30px 120px;}
  .prices .column {padding: 20px;}
  .prices .column .tile {padding: 20px;}
  .prices .column .tile .label {font-size: 24px;}
  .prices .column .tile ul {font-size: 18px;}
  footer .links a {padding-left: 30px;}
  footer .social img {margin-right: 15px;}
}
@media (max-width:1100px){
  a,p,div,span, input {font-size:20px;}
  header {padding: 0 50px;}
  header .login {margin-right: unset}
  nav a {padding-left: 30px;}
  main {padding-bottom: 50px;}
  main .banner {padding: 0 50px;}
  .prices {flex-direction: column;}
  .prices .column {width: 100%;}
  .prices .column .tile ul {font-size: 20px;}
  .button_big, input[type=submit] {font-size: 24px; height: 50px; line-height: 50px;}
  .button_big2 {font-size: 24px; padding: 0 30px; margin-left: 50px; height: 50px; line-height: 50px;}

  h1, h2, h3, p {margin: 0 50px;}
  h1 {
    margin-top: 80px;
  }
  h2 {
    margin-top: 70px;
  }
  h3 {
    margin-bottom: 20px;
    margin-top: 70px;
  }
  footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 100px;
  }
  footer .logo_footer {left: unset; float: unset; top: 290px}
  footer .links {left: unset; float: unset; top: 333px}
  footer .links a {padding: 0 15px;}
  footer .social {margin-right: unset; float: unset; top: 390px;}
  footer .social img {margin-right: unset; margin: 8px;}
}
@media (max-width:900px){
  header {padding: 0 20px; height: 120px;}
  header .logo img {width: 150px;}
  h1, h2, h3, p {margin: 0 20px;}
  h1 {
    margin-top: 50px; font-size: 60px; line-height: 60px;

  }
  main {border-radius: 0 0 50px 50px;}
  main .banner {padding: 0 20px; height: calc(180vh);}
  main.hp {
    background-position: calc(11vw) calc(94vh), calc(39vw) calc(71vh), right calc(75vh), left calc(45vh);
    background-size: 80%, 46%, 98%, 203%;
  }
  main .banner h1 span {font-size: 20px;}
  main .banner .button_big {margin: 0px auto;}
  h2 {
    margin-top: 40px;
    font-size: 50px;
    line-height: 50px;
  }
  h3 {
    margin-bottom: 20px;
    margin-top: 40px;
    font-size: 24px;
    padding-bottom: 16px;
    background: radial-gradient(farthest-side, #ee3e52 98%,transparent 100%) bottom right/8px 8px,
    radial-gradient(farthest-side, #fcc23d 98%,transparent 100%) bottom left /8px 8px,
    linear-gradient(to right,#fcc23d,#ee3e52) bottom/calc(100% - 8px) 8px;
    background-repeat: no-repeat;
  }

  nav,  header .loginsignup {
    display: none;
  }
  body.menu_open {overflow: hidden;}
  nav.menu_open {
    top: calc(50vh - 100px);
    flex-direction: column;
    display: flex;
    left: 50%;
    position: absolute;
  }
  nav.menu_open a {
    padding-left: unset;
    margin-left: -50%;
    line-height: 50px;
    font-weight: 900;
  }
  .loginsignup.menu_open {
    display: flex;
    top: calc(100vh - 125px);
    flex-direction: column;
    left: 50%;
    position: absolute;
    margin: 0;
  }
  .loginsignup.menu_open .signup, .loginsignup.menu_open .login {
    margin-left: calc(-50% - 60px);
  }
  .hamburger {
    display: flex;
    margin-left: auto;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to right, #fcc23d, #ee3e52);
  }
  .hamburger img {
    width: 20px;
    height: 20px;
  }
  .hamburger img.menu_open {
    display: block;
  }
  .hamburger img.menu_close {
    display: none;
  }
  .hamburger.menu_open img.menu_open {
    display: none;
  }
  .hamburger.menu_open img.menu_close {
    display: block;
  }
  input[type=text], input[type=password] {
    margin: 30px 20px 20px; height: 50px; 
    box-sizing: border-box;
    width: calc(100% - 40px);
  }
  .button_big, input[type=submit] {
    margin: 90px auto 0;
    width: fit-content;
    display: block;
    font-size: 20px;
  }
  form input[type=submit] {width: fit-content;}
  .button_big2 {
    font-size: 20px; padding: 0 20px; height: 40px; line-height: 40px; margin: 90px auto 0;
    width: fit-content;
    display: block;
  }
  .button_big2::after {
    top: -8px;
    bottom: -8px;
    left: -8px;
    right: -8px;
  }
  .static {
    margin: 50px 20px 0;
}
  p.hightlight {
    font-size: 24px;
    line-height: 34px;
}
  p.hightlight a {
    font-size: 24px;
  }
  .rounded_bottom {
    height: 50px;
    border-radius: 50px 50px 0 0;
    top: -50px;
  }
  .prices {border-radius: 50px 50px 0 0; padding: 5px 0px 80px;}
  .prices .column .tile {border-radius: 30px;}
  .prices .column .tile .period {padding-top: 0;}
  footer .logo_footer {width:150px;}
  footer .social img{width:40px; height:40px;}
}
@media (max-width: 500px){
  main.hp {
    background-position: calc(11vw) calc(127vh), calc(39vw) calc(109vh), right calc(105vh), left calc(87vh);
    background-size: 80%, 46%, 98%, 203%;
  }

}